<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>test</title>
????<style?type="text/css">
????html,
????body?{
????????margin:?0;
????????padding:?0;
????}
??.wrapper?{
????????overflow:?hidden;
????}
????.left?{
????????float:?left;
????????width:?300px;
????????background:?pink;
????}
????.right?{
????????float:?right;
????????width:?300px;
????????background:?pink;
????}
????.center?{
????????margin:0?300px;
????????
????????background:?gray;
????}
????</style>
</head>
<body>
????<div?class="wrapper">
????????<div?class="left">zuo</div>
????????<div?class="center">左右兩列固定，中間自適應(yīng)</div>
????????<div?class="right">you</div>
????</div>
????<script?type="text/javascript">
????</script>
</body>
</html>
2018-11-08
因?yàn)閐iv.center是個(gè)塊元素，當(dāng).div.right在設(shè)置浮動(dòng)前位置在div.center后，且在它下面;float之后，從之前的位置開始脫離文檔流，因此在下面。
2018-06-22
.center?{ ??/*margin:0?300px;*/ ??text-align:?center; ??background:?gray; ??position:?absolute; ??right:?300px; ??left:?300px; }將.center設(shè)為絕對(duì)定位，添加左右距離300px
原來(lái)的布局里左浮動(dòng)脫離文檔流，中間塊會(huì)忽視左邊占用的位置，所以和左邊在一行，用margin撐開兩邊的間隔，但是中間還是塊級(jí)元素，且沒有脫離文檔流，會(huì)占用一行，右邊不會(huì)忽視中間塊占用的位置，所以換行。
2018-02-26
不好用文字表述.你理解理解.因?yàn)?lt;div?class="left">zuo</div>和<div?class="right">you</div>是浮動(dòng),相當(dāng)于三個(gè)元素垂直排列.但是<div?class="center">左右兩列固定，中間自適應(yīng)</div>是文本流,應(yīng)該環(huán)繞在元素1那邊.之所以出現(xiàn)你那樣的情況是因?yàn)槟愕腸ss的center有外邊距導(dǎo)致的.取消margin:0?300px;外邊距,你會(huì)發(fā)現(xiàn)3還是在下邊,這是因?yàn)槟闶窍蛴腋?dòng).而文本流占據(jù)了1的所有的右側(cè),交換1和3位置就好了,是因?yàn)楦?dòng)并排排列,一個(gè)向左,一個(gè)向右,然后文本流環(huán)繞到中間.
2018-02-09
把
?<div?class="center">左右兩列固定，中間自適應(yīng)</div>
????????<div?class="right">you</div>
位置調(diào)換即可實(shí)現(xiàn)三欄布局，