前面的話

　　前面已經介紹過單列定寬單列自適應的兩列布局，而兩列自適應布局是指一列由內容撐開，另一列撐滿剩余寬度的布局方式。本文將從float、table、flex和grid來介紹兩列自適應布局的4種思路

?

float

【思路一】float

　　在單列定寬單列自適應的兩列布局中，經常用float和負margin配合實現(xiàn)布局效果。但由于margin取值只能是固定值，所以在兩列都是自適應的布局中就不再適用。而float和overflow配合可實現(xiàn)兩列自適應效果。使用overflow屬性來觸發(fā)bfc，來阻止浮動造成的文字環(huán)繞效果。由于設置overflow:hidden并不會觸發(fā)IE6-瀏覽器的haslayout屬性，所以需要設置zoom:1來兼容IE6-瀏覽器

<style> p{margin: 0;} .parent{overflow: hidden;zoom: 1;} .left{float: left;margin-right: 20px;} .right{overflow: hidden;zoom: 1;} </style> <div class="parent" style="background-color: lightgrey;"><div class="left" style="background-color: lightblue;"><p>left</p></div><div class="right" style="background-color: lightgreen;"><p>right</p><p>right</p></div> </div>

style="width: 100%; height: 60px;" src="https://demo.xiaohuochai.site/css/buju2/b1.html" frameborder="0" width="320" height="240">

?

table

【思路二】table

　　若table元素不設置table-layout:fixed，則寬度由內容撐開。在某個table-cell元素的外層嵌套一層div，并設置足夠小的寬度如width:0.1%

<style> p{margin: 0;} .parent{display:table;width:100%;} .leftWrap{display:table-cell;width:0.1%;} .left{margin-right: 20px;} .right{display:table-cell;} </style> <div class="parent" style="background-color: lightgrey;"><div class="leftWrap" style="background-color: pink;"><div class="left" style="background-color: lightblue;"><p>left</p></div> </div><div class="right" style="background-color: lightgreen;"><p>right</p><p>right</p></div> </div>

style="width: 100%; height: 60px;" src="https://demo.xiaohuochai.site/css/buju2/b2.html" frameborder="0" width="320" height="240">

?

flex

【思路三】flex

　　flex彈性盒模型是非常強大的布局方式。基本上，一般的布局方式都可以實現(xiàn)

　　[注意]IE9-不支持

<style> p{margin: 0;} .parent{display:flex;} .right{margin-left:20px; flex:1;} </style> <div class="parent" style="background-color: lightgrey;"><div class="left" style="background-color: lightblue;"><p>left</p></div> <div class="right" style="background-color: lightgreen;"><p>right</p><p>right</p></div> </div>

style="width: 100%; height: 60px;" src="https://demo.xiaohuochai.site/css/buju2/b3.html" frameborder="0" width="320" height="240">

?

grid

【思路四】grid

　　[注意]IE10-瀏覽器不支持?

<style> p{margin: 0;} .parent{display:grid;grid-template-columns:auto 1fr;grid-gap:20px} </style> <div class="parent" style="background-color: lightgrey;"><div class="left" style="background-color: lightblue;"><p>left</p></div> <div class="right" style="background-color: lightgreen;"><p>right</p><p>right</p></div> </div>

style="width: 100%; height: 60px;" src="https://demo.xiaohuochai.site/css/buju2/b4.html" frameborder="0" width="320" height="240">

?

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的两列自适应布局的4种思路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。