《web前端笔记30》css三栏布局、左右两栏宽度固定，中间自适应

html-css015

《web前端笔记30》css三栏布局、左右两栏宽度固定，中间自适应,第1张

三栏布局一般指的是页面中一共有三栏， 左右两栏宽度固定，中间自适应的布局 ，三栏布局的具体实现：

利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。

现有样式

不能满足人们的需求.

人们需要:

CSS 2 并没有提供原生支持，所以需要将一些属性组合起来，以实现布局

国外一般不这么叫. <div> 是一个无语义的标签，适合用来做与内容无关的事情.

只能用 <div> 吗？

优化:

省标签，便于控制局部 范例

给通栏加背景色 范例

IE 6 不支持 inline-block :

范例

一列固定宽度，另外一列自适应宽度

浮动元素 + 普通元素margin 范例

如果侧边栏在右边:

注意: 考虑到浏览器的渲染顺序,

aside和main顺序不可更改.

两侧两列固定宽度，中间列自适应宽度

范例

此处的注释为去掉换行符的影响

.wrapper

{

width:

100%

/*

也可以固定宽度

*/

height:

200px

}

.wrapper

>

div

{

display:

inline-block

/*

如需支持ie8以下版本，用浮动来做

*/

width:

calc(100%

/

3)

/*

此处运用了一个css3的表达式，将div三等分，ie8及以上可以支持，当然也可以根据需要设置固定值

*/

width:

-webkit-calc(100%

/3)

width:

-moz-calc(100%

/

3)

height:

100%

}

以上经亲自测过，ie8+、chrome、firefox表现良好。