同一列所有的 div 顯示相同高度

在切版面常遇到的問題：同一列的 div 高度不同，這樣版面看起來會很醜

例如：

HTML：

<div id="parent">     <div class="children borderGreen">正常狀況下，字多的 div，高度會比較高，但這樣版面會很怪，所以必須同一列的 div 都要同高，用計算的方式又很麻煩</div>     <div class="children borderBlue">這個高度比較低</div> </div>

CSS：

div{     box-sizing:border-box;   } .children{     float:left;     width:calc(100%/2);     border:1px solid; } .borderRed{     border-color:red; } .borderGreen{     border-color:green; } .borderBlue{     border-color:blue; }

Result：

要解決這個問題，可以改用下面的設定方式

1.在父 div 裡設定 CSS屬性如下：

#parent{     display: -ms-flexbox;     display: -webkit-flex;     display: flex; } .sameHeight{     -webkit-flex: 1;     -ms-flex: 1;     flex: 1; }

2. HTML Code ：

<div id="parent">     <div class="children borderGreen sameHeight">正常狀況下，字多的 div，高度會比較高，但這樣版面會很怪，所以必須同一列的 div 都要同高，用計算的方式又很麻煩</div>     <div class="children borderBlue sameHeight">這個高度比較低</div> </div>

Sample：

PS.如果您是直接 copy & paste 網頁上的 code，請注意雙引號有沒有錯！因為笨蛋 Windows Live Writer 會自動替換掉一些符號，造成網頁碼錯誤，效果出不來！

PS.使用此方式讓同列 div 等高時，所有的子 div 都不要設 height:100%;