前面已經介紹過單列定寬單列自適應的兩列布局,而兩列自適應布局是指一列由內容撐開,另一列撐滿剩余寬度的布局方式。本文將從float、table和flex來介紹兩列自適應布局的3種思路。
思路一: float
在單列定寬單列自適應的兩列布局中,經常用float和負margin配合實現布局效果。但由于margin取值只能是固定值,所以在兩列都是自適應的布局中就不再適用。而float和overflow配合可實現兩列自適應效果。使用overflow屬性來觸發bfc,來阻止浮動造成的文字環繞效果。由于設置overflow:hidden并不會觸發IE6-瀏覽器的haslayout屬性,所以需要設置zoom:1來兼容IE6-瀏覽器
新聞熱點
疑難解答