这篇文章主要介绍CSS如何实现两栏布局,左边固定,右边自适应,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
1. float+overflow:hidden
这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性,所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码如下:
Document left left left left
right
right
2. float: left+ margin-left
float使左边的元素脱离文档流,右边的元素可以和左边的元素显示在同一行,设置margin-left让右边的元素不覆盖掉左边的元素, 代码如下:
Document left left left left
right
right
right
3. position: absolute + margin-left
左边绝对定位,右边设置margin-left,代码如下:
Document left left left left
right
right
right
4. flex布局
flex布局可以使两个子元素显示在同一行,只要左边的宽度固定,就可以实现效果, 代码如下:
Document left left left left
right
right
right
以上是“CSS如何实现两栏布局,左边固定,右边自适应”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!