1、flex布局(实现了两栏布局)
<style type="text/css">
.box{
display: flex; //flex布局
}
.left{
width: 300px; //定义左边的宽度
height: 200px;
background-color: blue;
}
.right{
flex: 1; //右边自适应?还不是很懂,我猜测是根据视口自动调整宽度
height: 200px;
background-color: red;
}
</style>
<div class="box">
<div class="left">left</div>
<div class="right">right</div>
</div>
2、css3实现多栏布局
css3有一些关于布局的属性:column-width、column-count、column-rule、column-gap、columns.
column-width:设置每列的宽度,css解析器会自动根据页面的视口宽度算出在设定列宽的情况下。每行应该显示多少列
column-count:设置每行显示多少列,同样css解析器会自动计算每行的宽度,所以此属性和上边的属性只写其中一个即可
column-rule:定义每列中间的样式,eg:column-rule:1px solid #ff0000;
column-gap:设置列间距,但实际显示的列间距可能和设置的不同,因为以解析器计算出来的值为准
注意:column属性有些浏览器不能很好地支持,因此在具体使用的时候,记得在属性之前加上浏览器内核前缀