CSS布局：三栏.docxVIP

/pangni/article/details布局 左右栏固定宽度，中间栏自适应其余宽度。? ?文档顺序：左，中，右 1、一种不推荐的做法，用绝对定位实现。 实现要点：左栏left、右栏right设为绝对定位，分别设置width。左栏设置left和top， 右栏设置right和top。自适应的中间栏设置为相对定位，设置margin:0 200px(不用相对定位也可可以了)。 ************ 问题：如果非自适应的栏高度超过自适应的栏高度，并不能撑开底下的footer。 2、用浮动实现。 实现要点：三栏均为float: left。 中间栏设width为100%，设margin:0 -200px。margin-left和margin-right为-200px意味着原本应在的位置 可以向左和向右再占200px（width仍然占着 100%的宽度，只是不用换行去占这么大地了）， 则此时3栏位于同一行，且左栏与中间栏左侧重叠，右栏与中间栏右侧重叠。只要再将中间栏的数据左右往 里各挤200px即可。所以中间栏中再加了个div，设其margin:0 200px即可。（左右栏宽度都设置为200px;)文档顺序：中，左，右 1、再用一个包裹着（中，左），于是变成（左，中），（右）两栏布局。2、三栏均为float: left。中间栏设width为100%。一行。此时左栏和右栏将换行显示。 通过设置左栏的 margin-left: -100%;和右栏的margin-left: -200px;使三栏处于同一行显示。 此时刚好处于合理位置故无需设为相对定位进行偏移。 此时3栏位于同一行，且左栏与中间栏左侧重叠，右栏与中间栏右侧重叠。只要再将中间栏的数据左右往 里各挤左右栏的宽度即可。所以中间栏中再加了个div，设其margin:0 200px即可。 注意：为了兼容IE6，container的zoom:1不可少，它是为了使元素支持haslayerout，常常IE6出现误 差不兼容时，应先试下zoom:1是否可以解决。 ?3、圣杯布局： 实现要点：首先设置装着3栏的容器container的padding:0 150px 0 200px （ps:左栏width是200px，右栏width是150px）。由于中间栏是第一个DIV，且设了中间DIV的width:100%。 则下面要做的就是：1. 把左栏DIV放到container的padding-left的空白处：设margin-left: -100% （这个100%是container的width的100%，当然不包含padding）， 则往左移动了100%的距离， 但仍然在 padding-left空白处的右侧，所以再利用相对定位，使左移200px，即left:-200px，或者 right:200px。 2. 把右栏DIV放到container的padding-right的空白处：同上，先使同行显示则设margin-left: -150px， 再设right:-150px移动到正确位置。 但IE7解析有BUG. #container{padding: 0 150px 0 200px;} #container .column{position: relative;float: left;} #center{width: 100%;} #left{width: 200px;left: -200px;margin-left: -100%;} #right{width: 150px;margin-left: -150px;right: -150px;} /*IE6 7 Fix*/ #left{left:-200px;*left: 150px; /* RC width */ left:-200px/0; }?文档顺序：左，右，中 ?1、左栏float:left;右栏float：right;中栏自然流动，width：auto,环绕左栏，overflow：hidden；==============================================================================================3栏都固定宽度。 文档顺序：1 2 3 （假设有3个模块，模块分别命名为1，2，3）1、水平：1 2 3 ，全部都float：left2、水平：3 2 1 ，全部都float: left3、水平：2 1 3 ， 1 和2 float:left; 3 float:right; 1 margin-left:2的框宽；display:inline;//兼容IE6的负边距BUG 2 margin-left:-（1+2的框宽）；4、水平：3 1