往期推荐：
「css布局之全屏布局」
前言
多列布局
两列布局
<div class="layout"> <div class="layout-left"></div> <div class="layout-right"></div> </div>
复制代码
通过 float/margin-legt 实现
首先，给左边一列一个固定的宽度，高度，在通过 float:left 开启左浮动，再给右边一列一个以在列宽度的 margin-left 即可。
.layout { width: 920px; height: 880px; .layout-left { float: left; width: 300px; height: 100%; background-color: crimson; } .layout-right { margin-left: 100px; height: 100%; background-color: yellowgreen; }}
复制代码
通过 flex 实现。
使用 flex 的话，代码会非常的简洁，只需要左列固定宽度，右列声明 flex：1；使其自适应就可以了。
.layout { display: flex; width: 920px; height: 880px; .layout-left { width: 300px; background-color: crimson; } .layout-right { flex: 1; background-color: yellowgreen; }}
复制代码
三列布局
三列布局呢，紧挨着的两列宽度固定，另一列宽度自适应，每个列的高度是固定并且相等的。接下让我带大家具体看看是怎么实现的。
<div class="layout"> <div class="layout-left"></div> <div class="layout-middle"></div> <div class="layout-right"></div></div>
复制代码
flex 实现
和上面的同理，使用 flex 可以非常方便的写出来，只能万物皆可 flex。
.layout { display: flex; width: 920px; height: 880px; .layout-left { width: 100px; background-color: crimson; } .layout-middle { width: 200px; background-color: gray; } .layout-right { flex: 1; background-color: yellowgreen; }}
复制代码
float，margin-left 实现
当然通过，float 和 margin-left 也可以实现，只是相对麻烦点，没有 flex 那么简洁。
.layout { width: 920px; height: 880px; .layout-left { float: left; width: 100px; height: 100%; background-color: crimson; } .layout-middle { float: left; width: 200px; height: 100%; background-color: gray; } .layout-right { height: 100%; margin-left: 300px; background-color: yellowgreen; }}
复制代码
好，今天就到这里了，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！
评论