怎么用css实现两列布局
导读：本文共1102字符，通常情况下阅读需要4分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 两列布局经典的两列布局由左右两列组成，其特点为一列宽度固定、另一列宽度自适应和两列高度固定且相等。以下以左列宽度固定和右列宽度自适应为例，反之同理。<divclass="two-column-layout"><divclass="left"></div><divclass=&q... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。经典的两列布局由左右两列组成，其特点为一列宽度固定、另一列宽度自适应和两列高度固定且相等。以下以左列宽度固定和右列宽度自适应为例，反之同理。
<divclass="two-column-layout"><divclass="left"></div><divclass="right"></div></div>
float + margin-left/right
左列声明float:left和固定宽度，由于float使节点脱流，右列需声明margin-left为左列宽度，以保证两列不会重叠。
.two-column-layout{width:400px;height:400px;.left{float:left;width:100px;height:100%;background-color:#f66;}.right{margin-left:100px;height:100%;background-color:#66f;}}overflow + float
左列声明同上，右列声明overflow:hidden使其形成BFC区域与外界隔离。
.two-column-layout{width:400px;height:400px;.left{float:left;width:100px;height:100%;background-color:#f66;}.right{overflow:hidden;height:100%;background-color:#66f;}}flex
使用flex实现会更简洁。左列声明固定宽度，右列声明flex:1自适应宽度。
.two-column-layout{width:400px;height:400px;.left{float:left;width:100px;height:100%;background-color:#f66;}.right{overflow:hidden;height:100%;background-color:#66f;}} </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
怎么用css实现两列布局的详细内容，希望对您有所帮助，信息来源于网络。