css一行三列代码怎么写,css之页面三列布局(示例代码)

左右两边宽度固定，中间自适应

第一种方法：左右两边绝对定位

html代码

css代码

.left {

height: 200px;

width: 300px;

background-color: blue;

position: absolute;

left:0;

top:0}

.right {

width:300px;

height: 200px;

background-color: red;

position: absolute;

right:0;

top:0;

}

.middle{

height: 300px;

background-color: yellow;

margin:0300px;

}

第二种方法：可以利用浮动，左边的左浮动，右边的右浮动

css部分

#left {

width: 100px;float: left;

background: green;

height: 300px;

}

#right {

width: 100px;float: right;

background: red;

height: 300px;

}

#middle {

margin-right: 110px;

margin-left: 110px;

height: 300px;

background: #ccc;

}

html部分;

第三种方法：这种方法是在实际的网站中应用的最多的，我个人感觉多少有些跟风的嫌疑。此方法很难用一句话概括。首先，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动(本例左浮动，下面所述依次为基础)，内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。

css：

.fl{float: left;

}

.main{

color: #fff;

}

.center{

background: #9A0069;

width:100%;

height: 300px;

}

.center .content{

padding:0100px;

}

.left{

width: 100px;

height: 300px;

margin-left: -100%;

background: #009A61;

}

.right{

width: 200px;

height: 300px;

background: #00529A;

margin-left: -200px;

}

html:

center

left

right