⑴定宽与自适应
一列定宽 + 一列自适应
Methods ①：float + margin
优点：非常容易理解
缺点：兼容性有点点问题，IE6以下Bug，right里面的文字往右缩3px，
解决办法：在left容器上加上margin-right: -100px;
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
.left{
float: left;
width: 100px;
}
.right{
margin-left:120px;
}
Methods ②：float + margin + (fix)
优点：因为都是浮动的，不会出现3px的问题，兼容性非常好
缺点：left元素被盖住了，解决方案：position: relative;结构多，写的样式也多
<div class="parent">
<div class="left"><p>left</p></div>
<div class="right-fix"> //套一个class="right-fix"节点
<div class="right">
<p>right</p><p>right</p>
</div>
</div>
</div>
.left{
float: left;
width: 100px;
position: relative; //解决left元素被盖住
}
.right-fix{
float: right; width: 100%; //元素会掉下去
margin-left: -100px; //左侧空出100px
}
.right{
margin-left:120px;
}
Methods ③：float + overflow
优点：样式简单，只需设置left、right就可以了
缺点：IE6下不支持
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
.left{
float: left;
width: 100px;
margin-right: 20px;
}
.right{
overflow: hidden;
}
Methods ④：table
缺点：代码太多
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
.parent{
display: table;
width: 100%;
table-layout: fixed; //可以加速table渲染，实现布局优先
}
.left,.right{
display: table-cell;
}
.left{
width: 100px;
padding-right: 20px;
}
Methods ⑤：flex
缺点：兼容性问题，性能问题，做小范围布局，不能做大范围布局
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
.parent{
display: flex;
}
.left{
width: 100px;
margin-right: 20px;
}
.right{
flex: 1;
}
两列定宽 + 一列自适应
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="center"> //增加一个center
<p>center</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
.left,.center{ //增加一个center
float: left;
width: 100px;
margin-right: 20px;
}
.right{
overflow: hidden;
}
⑵不定宽与自适应
一列不定宽 + 一列自适应
Methods ①：float + margin(做不到)
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
}
.left p {
width: 200px;
}
Methods ②：float + margin + (fix)(做不到)
<div class="parent">
<div class="left"><p>left</p></div>
<div class="right-fix"> //套一个class="right-fix"节点
<div class="right">
<p>right</p><p>right</p>
</div>
</div>
</div>
Methods ③：float + overflow
优点：很多解决方案都会用到
缺点：IE6下不支持
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
}
.left p {
width: 200px;
}
Methods ④：table
缺点：代码太多
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
.parent{
display: table; width: 100%;
}
.left,.right{
display: table-cell;
}
.left{
width: 0.1%; //兼容性问题，IE8，IE6/7不支持
padding-right: 20px;
}
.left p{
width:200px;
}
Methods ⑤：flex
缺点：兼容性问题，性能问题，做小范围布局，不能做大范围布局
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
.parent{
display: flex;
}
.left{
width: 200px;
margin-right: 20px;
}
.right{
flex: 1;
}
两列不定宽 + 一列自适应
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="center">
<p>center</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
.left,.center{
float: left;
margin-right: 20px;
}
.right{
overflow: hidden;
}
.left p,.center p{
width: 100px;
}
⑶等分
Methods ①：float
缺点：如果column列数发生改变，需要修改width: 25%;
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
.parent{
margin-left: -20px;
}
.column{
float: left;
width: 25%; //如果column列数发生改变，需要修改width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
Methods ②：table
特点：每一列不需要设置25%;
缺点：外面多了一层容器
<div class="parent-fix">
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
</div>
.parent-fix{
margin-left: -20px;
}
.parent{
display: table;
width:100%;
table-layout: fixed;
}
.column{
display: table-cell;
padding-left: 20px;
}
Methods ③：flex
缺点：兼容性
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
.parent{
display: flex;
}
.column{
flex: 1;
}
.column+.column{
margin-left:20px;
}
⑷等高
Methods ①：table
table特性：每列单元格都是等宽，每行单元格都是等高
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
.parent{
display: table;
width: 100%;
table-layout: fixed; //可以加速table渲染，实现布局优先
}
.left,.right{
display: table-cell;
}
.left{
width: 100px;
padding-right: 20px;
}
Methods ②：flex
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
.parent{
display: flex;
}
.left{
width: 100px;
margin-right: 20px;
}
.right{
flex: 1;
}
Methods ③：float
优点：兼容性比较好
缺点：伪等高，不是真正意义上的等高
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
.parent{
overflow: hidden;
}
.left,.right{
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left{
float: left; width: 100px;
margin-right: 20px;
}
.right{
overflow: hidden;
}
网友评论