一 布局可以有float,和position（绝对定位和相对定位）来设置，在这里就不多介绍，而是来介绍其他的布局类型
二
<1>一列固定宽度。。 ***想必这个大家都知道的直接给这个div的css中设置宽度和长度就可以了。
<2>一列自适应 这里就是给div的css中给长宽高都设置成*百分比*就可以了（width:70%; height:60%;），这样即便改变浏览器的窗口的话，其div的宽度和高度维持在当前浏览器宽的70%,和高的60%。
<3>两列固定宽度：话不多说直接上代码了
<style>
#left{ width:200px;
height:200px;
float:left;
background-color:pink;
}
#right{ width:200px;
height:200px;
float:left;
backgroung-color:green;
}
</style>
<body>
<div id=""left></div>
<div id="right></div>
</body>
<3>两列宽度自适应布局
<style type="text/css">
#left{ width:20%;
height:300px;
background-color: pink;
float:left;}
#right{ width:75%;
height:300px;
background-color: green;
float:left;}
</style>
<div id="left"></div>
<div id="right"></div>
</body>
</body>
*****注意这里设置那个百分比的时候不能是100%更不能超过100%因为这里很多的元素都有自己的默认属性
<4>两列右列宽度自适应
这里右列将会根据浏览器的窗口大小自己适应，在css中只需要设置右列的宽度就可以了。********注意注意这里只是对左边的盒子设置了浮动呦
<style>
#left{ width:200px;
height:300px;
background-color: pink;
float:left;}
#right{ height:300px;
background-color: green;
}
</style>
<5>三列浮动中间宽度自适应
这里就是对左边的盒子设置固定的宽度并且居左显示，右边的宽度设置固定的宽度并且居右显示，那么中间的*****那一列需要在左列和右列的中间，
根据左右列的间距变化自动适应。
<style>
#left{ width:200px;
height:300px;
background-color: pink;
position:absolute; left:0px;top:0px;}
#center{ background-color:blue;
height:300px;
margin-left:200px;
margin-right:200px;
}
#right{ width:200px;
height:300px;
background-color: green;
position:absolute; right:0px;top:0px;}
</style><body>
<div id="left"><div>
<div id="center"></div>
<div id="right"></div>
</body>
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
