如何讓這三個對齊div響應？

在我的網站主頁（https://abbaproperty.000webhostapp.com/）我有三個div的直列看起來像這樣：如何讓這三個對齊div響應？

但在稍小的卵石（不移動）觀看時，它看起來像這樣：

它們不再是一樣的高度。儘管我已經添加了一些響應式CSS，因此在較小的移動設備上看起來像這樣。

所以在這裏，我的問題是，有一個甜蜜點，其中這些div將不顯示很好的響應，我不能想即使是合乎邏輯的CSS來解決這個問題的。誰能幫忙？先謝謝你！

HTML：

<div class="container" style="width:100%; background-color:#205ba0; padding:30px;"> 

    <div class="col-md-offset-3 col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;"> 
     <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;"> 
      <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/rent.png" style="height:100px;"> 
     </div> 
     <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2> 
     A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br> 
     <a href="https://abbaproperty.000webhostapp.com/index.php/property-management/" style="color:white;">Find out more ></a> 
    </div> 

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;"> 
     <div class="trip" style="background-color:white; margin-bottom:15px;"> 
      <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/val.png" style="height:100px;"> 
     </div> 
     <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2> 
     Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br> 
     <a href="https://abbaproperty.000webhostapp.com/index.php/valuations/" style="color:white;">Find out more ></a> 
    </div> 

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;"> 
     <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;"> 
      <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/sale.png" style="height:100px;"> 
     </div> 
     <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2> 
     We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br> 
     <a href="https://abbaproperty.000webhostapp.com/index.php/sell/" style="color:white;">Find out more ></a> 
    </div> 

</div>

來源

2017-06-08 T.Doe

的[？如何保持兩個div是並排相同的高度（可能的複製https://stackoverflow.com/questions/2997767/how-do-i -keep-two-divs-that-side-the-same-height） – Santi

您可以嘗試使用flexbox：https://css-tricks.com/fluid-width-equal-height-列/ 或者如果您不能使用flexbox，請在列上設置最大高度並使用媒體查詢進行更新 – Maneesh

@ T.Doe嘗試儘可能避免內聯樣式。 – hungerstar

您將需要使用Flexbox，就爲這個！

在您的容器中，加入另一個類稱爲Flexbox的，並添加以下內容：

.flexbox { 
    display: flex; 
}

繼承人小提琴！

https://jsfiddle.net/d6xfu1yz/

來源

2017-06-08 13:39:00 Amy

無需爲此添加其他課程 – VilleKoo

您不希望將其添加到您的容器中，否則可能會干擾您網站上的其他內容。 – Amy

定義.container如Flexbox的和加入作爲在CSS定義的附加樣式屬性。

.container { 
 
display: flex; 
 
justify-content: space-around; 
 
align-items: stretch; 
 
}

<div class="container" style="width:100%; background-color:#205ba0; padding:30px;"> 
 

 
    <div class="col-md-offset-3 col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;"> 
 
     <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;"> 
 
      <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/rent.png" style="height:100px;"> 
 
     </div> 
 
     <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2> 
 
     A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br> 
 
     <a href="https://abbaproperty.000webhostapp.com/index.php/property-management/" style="color:white;">Find out more ></a> 
 
    </div> 
 

 
    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;"> 
 
     <div class="trip" style="background-color:white; margin-bottom:15px;"> 
 
      <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/val.png" style="height:100px;"> 
 
     </div> 
 
     <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2> 
 
     Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br> 
 
     <a href="https://abbaproperty.000webhostapp.com/index.php/valuations/" style="color:white;">Find out more ></a> 
 
    </div> 
 

 
    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;"> 
 
     <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;"> 
 
      <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/sale.png" style="height:100px;"> 
 
     </div> 
 
     <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2> 
 
     We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br> 
 
     <a href="https://abbaproperty.000webhostapp.com/index.php/sell/" style="color:white;">Find out more ></a> 
 
    </div> 
 

 
</div>

來源

2017-06-08 13:42:07 Gerard

只需添加display: flex到.container（不wrap）

來源

2017-06-08 13:42:16 Johannes

您可以display:table和display:table-cell做到這一點。只有在您無法以其他方式執行操作時才使用flex。

* { 
 
    box-sizing: border-box; 
 
} 
 
.table { 
 
    display: block; 
 
    table-layout:fixed; 
 
} 
 
.table-cell { 
 
    display: block; 
 
    width:100%; 
 
} 
 
@media screen and (min-width: 640px) { 
 
    .table { 
 
    display: table; 
 
    table-layout:fixed; 
 
    } 
 
    .table-cell { 
 
    display: table-cell; 
 
    width:33.333%; 
 
    } 
 
}

<div class="container table" style="width:100%; background-color:#205ba0; padding:30px;"> 
 

 
    <div class="col-md-offset-3 col-md-2 table-cell" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;"> 
 
     <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;"> 
 
     <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/rent.png" style="height:100px;"> 
 
     </div> 
 
     <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2> 
 
     A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br> 
 
     <a href="https://abbaproperty.000webhostapp.com/index.php/property-management/" style="color:white;">Find out more ></a> 
 
    </div> 
 

 
    <div class="col-md-2 table-cell" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;"> 
 
     <div class="trip" style="background-color:white; margin-bottom:15px;"> 
 
     <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/val.png" style="height:100px;"> 
 
     </div> 
 
     <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2> 
 
    Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br> 
 
     <a href="https://abbaproperty.000webhostapp.com/index.php/valuations/" style="color:white;">Find out more ></a> 
 
    </div> 
 

 
    <div class="col-md-2 table-cell" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;"> 
 
     <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;"> 
 
     <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/sale.png" style="height:100px;"> 
 
     </div> 
 
     <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2> 
 
     We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br> 
 
     <a href="https://abbaproperty.000webhostapp.com/index.php/sell/" style="color:white;">Find out more ></a> 
 
    </div> 
 

 
</div>

來源

2017-06-08 13:43:33 WizardCoder

如果您不需要支持IE9及以下版本，請使用'flexbox'，否則請使用'display：table;'等。 – hungerstar

@WizardCoder Flexboxes比表格好得多，它不應該被視爲我猜的最後一個選項。 –

此外，flex還會輕微影響加載時間，因爲瀏覽器必須執行更多計算。 – WizardCoder

將

<div class='row'>

容器下課。它使div層響應也把類= 「IMG響應」的形象標籤上，使之反應過於

<div class="container" style="width:100%; background-color:#205ba0; padding:30px;"> 
<div class="row"> 
    <div class="col-md-offset-3 col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;"> 
     <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;"> 
      <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/rent.png" style="height:100px;"> 
     </div> 
     <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2> 
     A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br> 
     <a href="https://abbaproperty.000webhostapp.com/index.php/property-management/" style="color:white;">Find out more ></a> 
    </div> 

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;"> 
     <div class="trip" style="background-color:white; margin-bottom:15px;"> 
      <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/val.png" style="height:100px;"> 
     </div> 
     <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2> 
     Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br> 
     <a href="https://abbaproperty.000webhostapp.com/index.php/valuations/" style="color:white;">Find out more ></a> 
    </div> 

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;"> 
     <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;"> 
      <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/sale.png" style="height:100px;"> 
     </div> 
     <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2> 
     We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br> 
     <a href="https://abbaproperty.000webhostapp.com/index.php/sell/" style="color:white;">Find out more ></a> 
    </div> 
</row> 
</div>

來源

2017-06-08 13:49:43

您應該使用flexbox和media queries

CSS：

.container > div { 
    display: block; 
} 

@media (min-width: 640px) { 
    .container { 
     display: flex; 
    } 
    .container > div { 
     flex: 1 1 auto; 
    } 
}

隨着flexbox的所有容器的兒童將會等高。

CSS技巧教程：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2017-06-08 13:59:21

如何讓這三個對齊div響應？

回答

相關問題