使用CSS实现三联列布局-优快云博客

本文介绍了两种纯CSS实现三联列布局的方法。第一种是推荐的flex布局法，通过设置父元素display: flex及子元素样式实现自适应布局，但存在古老浏览器兼容性问题。第二种是双飞翼布局，利用margin属性调整元素位置，需额外操作以避免内容被遮挡。

最近翻看了之前的一些面经，发现之前的一些问题并没有得到根本的解决，赶紧补习一下；

这里我介绍两种方法：

最推荐的一种，也是自己用的比较多的一种方法 flex布局法：首先在总的父级元素上设置一个display: flex;属性。然后给定左右两个元素的宽高，中间元素设置flex:1;这样就可以完美实现自适应三联列（里面的三个div分别是左中右）

    <!-- 1.利用flex 父级元素设置display: flex;  中间元素设置flex:1; -->
    <div class="allblock" style="display: flex; width: 100%;height: auto; ">
        <div style="width: 200px;height: 500px;background-color: red;">1</div>
        <div style="flex: 1;background-color: yellow;">2</div>
        <div style="width: 200px;height: 500px;background-color:red ;">3</div>
    </div>

这种方法的缺点除了对于古老的浏览器有一些兼容性的问题以外，没有任何缺点代码简单，清晰明了好理解

2. 给大家介绍一种之前的布局方法：双飞翼布局

首先设置第一个div为中间区域 width:100%；其余两个块和之前类似为什么要定义第一个块为中间，因为我们要把相对需要更改位置的块放在下面，从而不需要操作中间区域

应该是这样子，试想一下，我们如何能让红和蓝块和他们跑到一行上呢？

我们利用了margin属性，要让黄块到最前面，需要margin-left：-100%；蓝块相对应会到现在黄块上，只需要margin-left：-200px（就是自己的宽就可以）

看起来还不错，但是你会发现，上面的数字1消失不见了，其实是红色块是整个行都覆盖了，数字1被黄块挡住了，所以就需要多一步操作，在红块的里面，加一个子集，给他设置margin: 0 200px;来抵消空间，这样就完成了双飞翼布局

    //正式写代码的时候还是建议大家可以用外联css的方式去写样式，这里给大家这样写仅仅是为了直观好理解
    <div class="allblock" style="width: 100%;height: auto; ">
        <div style="width: 100%;height: 300px; background-color: red; float: left;">
            <div style="margin: 0 200px;">1</div>
        </div>
        <div style=" width:200px;height: 300px;float: left;margin-left: -100%; background-color: yellow;">2</div>
        <div style="width: 200px;height: 300px; margin-left: -200px; background-color:rgb(0, 225, 255);float: left;">3</div>
    </div>