自适应布局"/>
多列等高及自适应布局
多列等高是常见的布局之一。
即让内容高度不一样的每一列保持高度一致。
解决方案：
利用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>
更多推荐
多列等高及自适应布局
发布评论