【问题标题】：how to make two div beside each other如何让两个div并排
【发布时间】：2021-09-01 19:07:06
【问题描述】：
我想在桌面宽度上使两个 div 并排放置，在移动版本上它工作正常，它们彼此下方但是当我尝试使我的浏览器行为在桌面大小上并尝试更改浮动左上的第一个 div它消失了，不起作用，请帮忙？
.sgpb-main-html-content-wrapper{
text-align:center !important;
}
.column1{
background-image: url('http://wohnwagen-mieten.at/wp-content/uploads/2021/06/woman.jpg');
background-repeat: no-repeat;
background-size: cover;
height:320px !important;
}
.column2{
height:250px !important;
}
#sgpb-popup-dialog-main-div{
padding: 0 !important;
max-width:350px !important;
width:310px !important;
padding:0 !important;
border-radius: 0 !important
}
.sgpb-popup-dialog-main-div-theme-wrapper-6{
left:0 !important;
top:85px !important;
}
.dummytext{
color: white;
font-size: 30px;
font-weight: bolder;
line-height: 35px;
text-align: center;
padding-top: 20px;
}
.column2 > p {
margin: 0 !important
}
<div class="row">
<div class="column1" style="background-color:red;">
</div>
<div class="column2" style="background-color:blue;">
<h4 class ="dummytext" style="margin: 0 !important"> Mietwagen-Preisvergleich
Deutschlands</h4>
<div class="action-btn">
<img class="size-full wp-image-1658 aligncenter" src="https://www.mietwagen-ticker.de/wp-content/uploads/2021/05/autoeurope.jpg" alt="" width="100" height="71" />
<span data-href="https://clkde.tradedoubler.com/click?p=300883&a=3040124&g=24628776" class="BUTTON_NZV" style="border-radius: 7px;
color: #FFFFFF;
font-family: Arial;
font-size: 31px;
font-weight: 600;
background-color: #1BC325;
text-decoration: none;
cursor: pointer;
text-align: center;
min-width: 80%;
" onclick="window.open('#','_blank');window.open(this.getAttribute('datahref'),'_self');">OK</span>
</div>
</div>
</div
【问题讨论】：
标签：
html
css
mobile
browser
responsive-design
【解决方案1】：
您看到的问题（第 1 列消失）很可能是因为它没有内容。
以下是使用 flexbox 的修复，并在两个列 div 上设置 flex: 1，以便它们在 .row div 内具有相等的宽度。
我添加了一个媒体查询，以便 flexbox 仅应用于桌面屏幕：
//set maximum width allowed for the columns
.column1, .column2 {
max-width: 350px;
}
@media(min-width: 720px) {
.row {
display: flex;
flex-direction: row;
align-items: center;
}
.column1, .column2 {
flex: 1;
}
}
演示：
.sgpb-main-html-content-wrapper{
text-align:center !important;
}
.column1{
background-image: url('http://wohnwagen-mieten.at/wp-content/uploads/2021/06/woman.jpg');
background-repeat: no-repeat;
background-size: cover;
height:320px !important;
}
.column2{
height:250px !important;
}
#sgpb-popup-dialog-main-div{
padding: 0 !important;
max-width:350px !important;
width:310px !important;
padding:0 !important;
border-radius: 0 !important
}
.sgpb-popup-dialog-main-div-theme-wrapper-6{
left:0 !important;
top:85px !important;
}
.dummytext{
color: white;
font-size: 30px;
font-weight: bolder;
line-height: 35px;
text-align: center;
padding-top: 20px;
}
.column2 > p {
margin: 0 !important
}
.column1, .column2 {
max-width: 350px;
}
@media(min-width: 720px) {
.row {
display: flex;
flex-direction: row;
align-items: center;
}
.column1, .column2 {
flex: 1;
}
}
<div class="row">
<div class="column1" style="background-color:red;">
</div>
<div class="column2" style="background-color:blue;">
<h4 class ="dummytext" style="margin: 0 !important"> Mietwagen-Preisvergleich
Deutschlands</h4>
<div class="action-btn">
<img class="size-full wp-image-1658 aligncenter" src="https://www.mietwagen-ticker.de/wp-content/uploads/2021/05/autoeurope.jpg" alt="" width="100" height="71" />
<span data-href="https://clkde.tradedoubler.com/click?p=300883&a=3040124&g=24628776" class="BUTTON_NZV" style="border-radius: 7px;
color: #FFFFFF;
font-family: Arial;
font-size: 31px;
font-weight: 600;
background-color: #1BC325;
text-decoration: none;
cursor: pointer;
text-align: center;
min-width: 80%;
" onclick="window.open('#','_blank');window.open(this.getAttribute('datahref'),'_self');">OK</span>
</div>
</div>
</div