css三栏布局，中间自适应

来源：互联网发布：像初页一样的软件编辑：程序博客网时间：2024/04/28 01:39

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>

这个时候中间列一定要放在最后。因为此时，第一列左浮动了，第二列就会浮动到第一列的右边，第二列右浮动了，则第三列会浮动到第二列的左边，就会形成三栏。

0 0