CSS常用布局之——一列定宽，一列自适应解决方案

纵观css盒子（标准or非标准）常用的布局中，我大致分为2类，一种是居中，一种是等分。居中包含了水平居中，垂直居中，水平垂直居中；等分又包含了等分块布局，等分高布局……

一列定宽，一列自适应

1. float + margin

<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>

<style>
.left {
float: left;
width: 100px;
}
.right {
margin-left: 100px
/*间距可再加入 margin-left */
}
</style>

IE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px

2. float + overflow

<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>

<style>
.left {
float: left;
width: 100px;
}
.right {
overflow: hidden;
}
</style>

设置 overflow: hidden 会触发 BFC 模式（Block Formatting Context）块级格式上下文

3. table

<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>

<style>
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left {
display: table-cell;
width: 100px;
}
.right {
display: table-cell;
/*宽度为剩余宽度*/
}
</style>

table

的显示特性为每列的单元格宽度和一定等与表格宽度。

table-layout: fixed

可加速渲染，也是设定布局优先。

table-cell

中不可以设置

margin

但是可以通过

padding

来设置间距

4. flex

<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>

<style>
.parent {
display: flex;
}
.left {
width: 100px;
margin-left: 20px;
}
.right {
flex: 1;
}
</style>

低版本浏览器兼容问题