当前位置:Gxlcms > html代码 > CSS两列及三列自适应布局方法整理_html/css_WEB-ITnose

CSS两列及三列自适应布局方法整理_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:43人阅读

在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助。先上目录:

  • 两列布局:左侧定宽,右侧自适应
    • 方法一:利用float和负外边距
    • 方法二:利用外边距
    • 方法三:利用position
    • 方法四:利用flex布局
  • 三列布局:左右定款,中间自适应。
    • 方法一:使用负外边距
    • 方法二:使用绝对定位
    • 方法三:使用flex布局

两列布局:左侧定宽,右侧自适应

方法一:利用float和负外边距

        Document        
右侧主体自适应区块
左侧定宽200px区块
  • 优点:考虑了页面优化,右侧主内容区先加载,左侧后加载。

  • 缺点:多添加了一层div包裹。

方法二:利用外边距

        Document        
左侧定宽200px区块
右侧主体自适应区块
  • 优点:代码简洁,便于理解

  • 缺点:不利于页面优化,右侧主内容区后加载

方法三:利用position

        Document        
右侧主体自适应区块
左侧定宽200px区块
  • 优点:考虑到了页面优化,右侧内容区先加载

  • 缺点:暂时没想到。。

上述三种方法兼容 IE7以上,但在IE7下不设置高度时,会产生高度错位bug。可通过设置父元素 font-size=0,再分别设置 子元素font-size解决。

方法四:利用flex布局

        Document    
右侧主体自适应区块
左侧定宽200px区块
  • 优点:CSS3新布局方式,高大上

  • 缺点:仅支持 IE11+。

三列布局:左右定款,中间自适应。

方法一:使用负外边距

        Document        
中间主体区域宽度自适应
左侧定宽200px
右侧定宽300px
  • 优点:兼容IE7+,考虑到页面优化,中间内容区先加载

  • 缺点:多一层div嵌套,不易理解

方法二:使用绝对定位

        Document    
中列
左列
  • 优点:代码结构简单,考虑到了页面优化,中间内容去先加载

  • 缺点:暂时没想到。。

方法三:使用flex布局

  Document 
...
...
  • 优点:高大上

  • 缺点:仅支持IE11+

人气教程排行