码迷,mamicode.com
首页 > Web开发 > 详细

css布局,读《css那些事儿》-未完

时间:2015-11-11 11:40:23      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

两列布局:

1、两列定宽结构:
  要点:float、width固定、 :after清除浮动。
    前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象。

2、两列宽度自适应结构:
    要点:float、width百分比、 :after清除浮动。

3、单列定宽-单列自适应结构:

要点:浮动、负边距效果、mainbox增加内容div并设置margin:after清除浮动、js实现等高
原理:mainbox的浮动并将其宽度设置为100%,将其中的.content的默认宽度值(auto)与margin右所留的空白,再利用负边距原理将侧边栏到主要内容的两边。
 

css布局,读《css那些事儿》-未完

标签:

原文地址:http://www.cnblogs.com/shenfangfang/p/4955463.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!