如何让两个 div 并排

Question

我想在桌面宽度上让两个 div 彼此并排，在移动版本上它工作正常，它们互相吼叫但是当我尝试让我的浏览器行为在桌面尺寸上并尝试改变float 上的第一个 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

Answer 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

如何让两个 div 并排

how to make two div beside each other

html

css

browser

mobile

responsive-design