1)使用float+overflow (1)原理、用法
(2)代码实例
<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;
}
(3)优缺点
2)使用float+margin (1)原理、用法
(2)代码实例
<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;
}
(3)优缺点
3)使用float+margin(改良版) (1)原理、用法
(2)代码实例
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="rigth-fix">
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div></div>
.left { float:left; width:100px; position:relative;
}.right-fix { float:right; width:100%; margin-left:-100px;
}.right { margin-left:120px;
}
(3)优缺点
4)使用table (1)原理、用法
(2)代码实例
<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;
}.left { width:100px; padding-right:20px;
}.right,.left { display:table-cell;
}
5)使用flex (1)原理、用法
(2)代码实例
<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;
}
(3)优缺点
(1)原理、用法
(2)代码实例
<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; width:100px; margin-right:20px;
}.right { overflow:hidden;
}
1)使用float+overflow (1)原理、用法
(2)代码实例
<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;
}
(3)优缺点
2)使用table (1)原理、用法
(2)代码实例
<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%; padding-right: 20px;
}.left p{ width:200px;
}
(3)优缺点
3)使用flex (1)原理、用法
(2)代码实例
<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 { margin-right:20px;
}.right { flex:1;
}.left p{ width: 200px;
}
(3)优缺点
(1)原理、用法
(2)代码实例
<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;
}
公式转化:l = w * n + g * (n-1) -> l = w * n + g * n - g -> l + g = (w + g) * n
因此,我们需要解决两个问题:
1)使用float (1)原理、用法
(2)代码实例
<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;//l增加g}.column{ float: left; width: 25%; padding-left: 20px; box-sizing: border-box;//包含padding区域 w+g}
(3)优缺点
2)使用table (1)原理、用法
(2)代码实例
<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;//l+g}.parent{ display: table; width:100%; table-layout: fixed;
}.column{ display: table-cell; padding-left: 20px;//w+g}
(3)优缺点
3)使用flex (1)原理、用法
(2)代码实例
<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;
}
(3)优缺点
1)使用float (1)原理、用法
(2)代码实例
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div></div>
p{ background: none!important;
}.left,.right{ background: #444;
}.parent{ overflow: hidden;
}.left,.right{ padding-bottom: 9999px; margin-bottom: -9999px;
}.left{ float: left;
width: 100px; margin-right: 20px;
}.right{ overflow: hidden;
}
(3)优缺点
2)使用table (1)原理、用法
(2)代码实例
<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;
}.left { width:100px; padding-right:20px;
}.right,.left { display:table-cell;
}
3)使用flex (1)原理、用法
(2)代码实例
<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;
}
(3)优缺点
4)使用display (1)原理、用法
(2)代码实例
<div class="parent">
<div class="left">left</div>
<div class="right">right </div>
</div>
.parent { width: 100%; display: -webkit-box;
}.left { width:100px; margin-right: 20px;
}.right { -webkit-box-flex: 1;
}
(3)优缺点
原文连接:https://segmentfault.com/a/1190000013565024#articleHeader1
作 者: 无悔铭
【声明】文章转至segmentfault平台,如果对您照成影响,侵删。
------------- END --------------