HTML5技术

多列布局 - 刘江龙

字号+ 作者:H5之家 来源:H5之家 2016-11-03 11:00 我要评论( )

两列定宽 两列布局 html,body,.body,.main,.side { margin padding height .body { width margin .main { background-color .side { background-color .main { float width .side { float width .clearfix:after { content display clear height overflow vi

两列定宽

image

两列布局 html,body,.body,.main,.side{ margin padding height .body{ width margin .main{ background-color .side{ background-color .main{ float width .side{ float width .clearfix:after{ content display clear height overflow visibilitysidemain

 

image

main向 左浮动 ,side向右浮动。

main定宽660px, side定宽300px

在main和side 元素的父元素上加 clearfix,用来『清除浮动』,这样后续的元素就不会受到 main和side『浮动动作』的影响。

 

 

定宽+自适应

image

 

 

 

 

 

不定宽+自适应

image

 

 

 

多列不定宽

 

image

 

 

 

 

 

等宽

image

 

 

 

 

 

 

 

css float 属性介绍:

如果你使用 chrome浏览器,这里推荐给你一个浏览器插件(用于查看div 分布情况)  Div Density

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • CSS Float 以及相关布局模式 - 刘江龙

    CSS Float 以及相关布局模式 - 刘江龙

    2016-11-03 10:00

  • 也来谈谈wap端瀑布流布局 - 小云菜

    也来谈谈wap端瀑布流布局 - 小云菜

    2016-08-30 13:01

  • 完整的REM布局的工作流程与规范 - AlexCZL

    完整的REM布局的工作流程与规范 - AlexCZL

    2016-08-19 10:00

  • 超酷不同风格页面布局幻灯片特效 - 爱上程序猿

    超酷不同风格页面布局幻灯片特效 - 爱上程序猿

    2016-08-14 12:00

网友点评
>