多列等高是常见的布局之一。
即让内容高度不一样的每一列保持高度一致。
解决方案:
利用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 lang="en">
<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>