儘管裏面有內容，我怎樣才能使列的高度相等？

我也必須使用CSS。對於這個特定的佈局，我已經列上創建這樣：

<div class="col-md-12 no-border no-padding"> 
    <h2 class="heading upper align-center">Headline</h2> 
    <p class="subheading lower align-center">Make the first thing your buyers see amazing</p> 
    <div class="help-link align-center upper margin-b-5"> 
    <p class="mini-help">Need help? Watch this&nbsp;&nbsp; 
    <div class="help"> 
     <div class="hvr-grow"><i class="icon-camrecorder"></i></div> 
    </div> 
    <p class="mini-help upper align-center margin b-5">&nbsp;&nbsp;quick video.</p> 
    </div> 
</div>

來源

2017-09-26 mina cosentino

http://getbootstrap.com.vn/examples/equal-height-columns/ –

我可以看到你已經實現了.row-eq-height設置等於所有列的高度，但你已經錯過了，還有另一種.col-md-12每一列中，它將內容的寬度作爲內容的寬度，因此只需將其設置爲height:100%，以取代父代的高度！

Codepen Demo

CSS變化：

.headlines .row-eq-height > div > .col-md-12{ 
    height:100%; 
}

來源

2017-09-26 19:27:06

謝謝！完美工作 - 完全忽略了嵌套列。謝謝！ –

@minacosentino不客氣！樂意效勞！ –

已經回答了，但我仍然對我的回答去。

我沒有碰到HTML或CSS，但我添加了一些選擇器和彈性規則，使每個盒子在同一高度的一行上。 https://codepen.io/gc-nomade/pen/wrJWMq

/* CSS UPDATE */

div.row, 
.row > div { 
    display: flex; 
    flex-wrap: wrap; 
    flex: 1 0 auto; 
} 
.row > div { 
    flex-flow: column; 
    flex: 1 0 auto; 
    margin-bottom: 0; 
} 
.row > div > div { 
    flex: 1 1 50%; 
} 

.multi-summ.align-center.bcolor-white { 
    margin-bottom: 2rem; 
}

來源

2017-09-26 20:10:36

儘管裏面有內容，我怎樣才能使列的高度相等？

回答

相關問題