多列等高是常見的布局之一。
即讓内容高度不一樣的每一列保持高度一緻。
解決方案：
利用table的自适應，将每個div變成td，td自然都是等高的。
html:
<div class="wrapper">
<div>生活如酒，或芳香，或濃烈，因為誠實，它變得醇厚；生活如歌，或高昂，或低沉，因為守信，它變得悅耳； 生活如畫，或明麗，或素雅，因為誠信，它變得美麗。</div>
<div>若能掬起一捧月光，我選擇最柔和的；若能采來香山紅葉，我選擇最豔麗的；若能摘下滿天星辰，我選擇最明亮的。也許你會說，我的選擇不是最好，但我的選擇，我相信。</div>
<div>當三闾大夫抱着石頭與江水相擁，當西楚霸王自刎時的鮮血染紅了整片夕陽，當普羅米修斯裸着身體被巨鷹啄食，當拉奧孔扭曲着身體仍想保衛自己的兒子，曆史的悲風中發出陣陣悲鳴，但他們生命的結尾卻那麼響亮有力，數千年來仍叩擊着人們的心靈，播放出永不低沉的生命絕唱！</div>
<div>人生彎彎曲曲水，世事重重疊疊山。</div>
</div>
css:
.wrapper{
display: table;
border-spacing: 20px; /* td的間距 */
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper > div {
display: table-cell;
width: 1000px; /* 設定寬度，table自動平分 */
border-radius: 5px;
background: #eeedf2;
padding: 10px;
border: 1px solid #ccc;
box-sizing: border-box;
}
展示效果：
這樣一個多列等高已經實作了。
但是一個好的頁面要有好的自适應響應式布局。
當在移動端的時候，我們希望變成單列布局。利用媒體查詢改一下樣式覆寫表格屬性即可。
/*寬度小于500時單列顯示 适用于移動端*/
@media (max-width: 500px) {
.wrapper{
display: block;
}
.wrapper > div{
display: block;
width: 100%;
margin-bottom: 20px;
}
}
展示效果：
而當在中螢幕1024px裝置上希望兩行布局呢？
加一個tr就行。
<div class="wrapper">
<div>生活如酒，或芳香，或濃烈，因為誠實，它變得醇厚；生活如歌，或高昂，或低沉，因為守信，它變得悅耳； 生活如畫，或明麗，或素雅，因為誠信，它變得美麗。</div>
<div>若能掬起一捧月光，我選擇最柔和的；若能采來香山紅葉，我選擇最豔麗的；若能摘下滿天星辰，我選擇最明亮的。也許你會說，我的選擇不是最好，但我的選擇，我相信。</div>
<span class="tr"></span>
<div>當三闾大夫抱着石頭與江水相擁，當西楚霸王自刎時的鮮血染紅了整片夕陽，當普羅米修斯裸着身體被巨鷹啄食，當拉奧孔扭曲着身體仍想保衛自己的兒子，曆史的悲風中發出陣陣悲鳴，但他們生命的結尾卻那麼響亮有力，數千年來仍叩擊着人們的心靈，播放出永不低沉的生命絕唱！</div>
<div>人生彎彎曲曲水，世事重重疊疊山。</div>
</div>
.tr{
display: none;
}
@media (max-width: 1024px) and (min-width: 501px) {
.tr{
display: table-row;
}
}
展示效果：
但是這個時候會有一個問題，就是中螢幕拉大大螢幕時tr的display:none已經沒用了，因為table的布局已經計算好了。但是這個也不用考慮，重新整理頁面即可，如果真要解決，那就需要用到js了。
這樣一個多列等高并且自适應的布局就做好了。
下面是完整代碼demo。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>多列等高</title>
<style>
.wrapper{
display: table;
border-spacing: 20px; /* td的間距 */
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper > div {
display: table-cell;
width: 1000px; /* 設定寬度，table自動平分 */
border-radius: 5px;
background: #eeedf2;
padding: 10px;
border: 1px solid #ccc;
box-sizing: border-box;
}
/*寬度小于500時單列顯示 适用于移動端*/
@media (max-width: 500px) {
.wrapper{
display: block;
}
.wrapper > div{
display: block;
width: 100%;
margin-bottom: 20px;
}
}
.tr{
display: none;
}
@media (max-width: 1024px) and (min-width: 501px) {
.tr{
display: table-row;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div>生活如酒，或芳香，或濃烈，因為誠實，它變得醇厚；生活如歌，或高昂，或低沉，因為守信，它變得悅耳； 生活如畫，或明麗，或素雅，因為誠信，它變得美麗。</div>
<div>若能掬起一捧月光，我選擇最柔和的；若能采來香山紅葉，我選擇最豔麗的；若能摘下滿天星辰，我選擇最明亮的。也許你會說，我的選擇不是最好，但我的選擇，我相信。</div>
<span class="tr"></span>
<div>當三闾大夫抱着石頭與江水相擁，當西楚霸王自刎時的鮮血染紅了整片夕陽，當普羅米修斯裸着身體被巨鷹啄食，當拉奧孔扭曲着身體仍想保衛自己的兒子，曆史的悲風中發出陣陣悲鳴，但他們生命的結尾卻那麼響亮有力，數千年來仍叩擊着人們的心靈，播放出永不低沉的生命絕唱！</div>
<div>人生彎彎曲曲水，世事重重疊疊山。</div>
</div>
</body>
</html>