多列等高及自适应布局

多列等高是常见的布局之一。

即让内容高度不一样的每一列保持高度一致。

解决方案：

利用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>

多列等高及自适应布局

猜你喜欢