div 三栏布局,最外面的那层div宽度不固定,包裹着三个div,这三个div水平平铺,其中第一个div的宽度固定,第二个div自适应, 第三个div的宽度为10%。
<div class="wrapper">
<div class="red">
</div>
<div class="blue">
</div>
<div class="gray">
</div>
<div
第一种方法:
<style>
.wrapper{position:relative;width:600px;height:600px;}
.red{position:absolute; left:0px;top:0;height:100px; width:150px; background-color:green;}
.blue{height:100px; background-color:red;margin-left:100px;margin-right:10%;}
.gray{position:absolute; right:0px;height:100px; width:10%; background-color:gray;top:0}
</style>
第二种方法:
<style>
.wrapper{width:600px;height:600px;}
.red{float:left;height:100px; width:150px; background-color:green;}
.blue{height:100px; background-color:red;margin-left:100px;margin-right:10%;}
.gray{float:right;height:100px; width:10%; background-color:gray;}
</style>
<body>
<div class="wrapper">
<div class="red">
</div>
<div class="gray">
</div>
<div class="blue">
</div>
<div>
</body>
这个时候中间列一定要放在最后。因为此时,第一列左浮动了,第二列就会浮动到第一列的右边,第二列右浮动了,则第三列会浮动到第二列的左边,就会形成三栏。