前面已經(jīng)介紹過單列定寬單列自適應(yīng)的兩列布局，而兩列自適應(yīng)布局是指一列由內(nèi)容撐開，另一列撐滿剩余寬度的布局方式。本文將從float、table和flex來介紹兩列自適應(yīng)布局的3種思路。
思路一: float
在單列定寬單列自適應(yīng)的兩列布局中，經(jīng)常用float和負(fù)margin配合實(shí)現(xiàn)布局效果。但由于margin取值只能是固定值，所以在兩列都是自適應(yīng)的布局中就不再適用。而float和overflow配合可實(shí)現(xiàn)兩列自適應(yīng)效果。使用overflow屬性來觸發(fā)bfc，來阻止浮動(dòng)造成的文字環(huán)繞效果。由于設(shè)置overflow:hidden并不會(huì)觸發(fā)IE6-瀏覽器的haslayout屬性，所以需要設(shè)置zoom:1來兼容IE6-瀏覽器
思路二: table
若table元素不設(shè)置table-layout:fixed，則寬度由內(nèi)容撐開。在某個(gè)table-cell元素的外層嵌套一層div，并設(shè)置足夠小的寬度如width:0.1%
新聞熱點(diǎn)
疑難解答
圖片精選
