自适应的双列布局利用浮动、外边和触发父级BFC即可实现,这种方法主要是因为BFC的高度计算会包含其内的浮动元素的高度,父盒子会被撑开。 现在给类名为"container"的父盒子添加"overflow: hidden"属性,使该父盒子成为BFC。继续给类名为"left"的盒子设置"float: left"和"width: 100px"属性,使该盒子成为浮动元素并且需要一个固定的宽度。最后再给类名为"right"的盒子设置左外边距"margin-left: 100px"属性,该属性值需要和左浮动的盒子宽度一致。此时父盒子的高度会根据左边浮动元素、右边内容区中高度较高的一方进行计算,并且右边内容区的宽度自适应,最好是根据需要,配合最大或最小宽度进行设置。 完成以上所讲的步骤即可通过测试,进入下一节的学习吧。
加载中...