CSS两列及三列自适应布局方法整理_html/css_WEB-ITnose
程序员文章站
2022-05-04 09:34:48
...
在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助。先上目录:
- 两列布局:左侧定宽,右侧自适应
- 方法一:利用float和负外边距
- 方法二:利用外边距
- 方法三:利用position
- 方法四:利用flex布局
- 三列布局:左右定款,中间自适应。
- 方法一:使用负外边距
- 方法二:使用绝对定位
- 方法三:使用flex布局
两列布局:左侧定宽,右侧自适应
方法一:利用float和负外边距
Document 右侧主体自适应区块
-
优点:考虑了页面优化,右侧主内容区先加载,左侧后加载。
-
缺点:多添加了一层div包裹。
方法二:利用外边距
Document 右侧主体自适应区块
-
优点:代码简洁,便于理解
-
缺点:不利于页面优化,右侧主内容区后加载
方法三:利用position
Document 右侧主体自适应区块
-
优点:考虑到了页面优化,右侧内容区先加载
-
缺点:暂时没想到。。
上述三种方法兼容 IE7以上,但在IE7下不设置高度时,会产生高度错位bug。可通过设置父元素 font-size=0,再分别设置 子元素font-size解决。
方法四:利用flex布局
Document 右侧主体自适应区块
-
优点:CSS3新布局方式,高大上
-
缺点:仅支持 IE11+。
三列布局:左右定款,中间自适应。
方法一:使用负外边距
Document 中间主体区域宽度自适应左侧定宽200px右侧定宽300px
-
优点:兼容IE7+,考虑到页面优化,中间内容区先加载
-
缺点:多一层div嵌套,不易理解
方法二:使用绝对定位
Document 中列左列右列
-
优点:代码结构简单,考虑到了页面优化,中间内容去先加载
-
缺点:暂时没想到。。
方法三:使用flex布局
Document ...
-
优点:高大上
-
缺点:仅支持IE11+
推荐阅读
-
css两列布局,一边固定宽度,另一边自适应_html/css_WEB-ITnose
-
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条._html/css_WEB-ITnose
-
常见左右两列div+css布局技巧整理_html/css_WEB-ITnose
-
css两列布局,一边固定宽度,另一边自适应_html/css_WEB-ITnose
-
常见左右两列div+css布局技巧整理_html/css_WEB-ITnose
-
纯CSS实现三列布局(两边固定,中间自适应)_html/css_WEB-ITnose
-
常见的两列、三列布局,宽高自适应_html/css_WEB-ITnose
-
CSS两列及三列自适应布局方法整理_html/css_WEB-ITnose
-
两列布局中单列定宽单列自适应布局的5种思路_html/css_WEB-ITnose
-
两列布局的设置方法总结_html/css_WEB-ITnose