两列定宽 两列布局 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
两列定宽
两列布局 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
main向 左浮动 ，side向右浮动。
main定宽660px, side定宽300px
在main和side 元素的父元素上加 clearfix，用来『清除浮动』，这样后续的元素就不会受到 main和side『浮动动作』的影响。
定宽+自适应
不定宽+自适应
多列不定宽
等宽
css float 属性介绍：
如果你使用 chrome浏览器，这里推荐给你一个浏览器插件(用于查看div 分布情况) Div Density
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
相关文章
CSS Float 以及相关布局模式 - 刘江龙
2016-11-03 10:00
也来谈谈wap端瀑布流布局 - 小云菜
2016-08-30 13:01
完整的REM布局的工作流程与规范 - AlexCZL
2016-08-19 10:00
超酷不同风格页面布局幻灯片特效 - 爱上程序猿
2016-08-14 12:00
网友点评
精彩导读
热门资讯
关注我们
