DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

浏览数：18 / 时间：2015年06月09日

　　一个入门的DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度。

　　1. 我的第一反应：

<div style="width:500px;">
        <div id="px1" style="float:left; height:100px; width:150px; background-color:gray;"></div>
        <div id="px2" style="float:left; height:100px; width:auto; background-color:red;"></div>
        <div id="px3" style="float:left; height:100px; width:150px; background-color:green;"></div>
    </div>

　　然后发现不对，中间红色的div根本就没有显示：

　　2. 百度看到一个CSDN问答，4楼的答案如下：

这是比较典型的一个三栏布局给你思路吧
左右两个可以用绝对定位让他们分别left:0;和right:0;
然后中间的元素不定宽度让他们的margin-left和margin-right分别对应左右两栏的宽度就好了

　　修改后：

    <div style="width:500px;" >
        <div id="px1" style="position:absolute; left:0px;height:100px; width:150px; background-color:gray;"></div>
        <div id="px2" style="float:left; height:100px;margin-left:150px;margin-right:150px; width:100%; background-color:red;"></div>
        <div id="px3" style="position:absolute; right:0px;height:100px; width:150px; background-color:green;"></div>
    </div>

　　结果如下：（浅灰色是html页面背景颜色）

　　很明显，这不符合预期。左右2个div的定位出现问题了，不是以父div 来定位，而是以窗口为父元素定位了。于是我在w3cshool详细了解才发现：

　　absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

　　就是说现在左右2个div的父元素是 static 定位（static是默认的定位方式），不符合absolute的定位要求。那怎么办，把那个父div也改为 position: absolute 呗，于是

　　3. 修改父元素为非static定位

    <div style="width:500px;position:absolute;left:200px;top:100px;" >
        <div id="px1" style="position:absolute; left:0px;height:100px; width:150px; background-color:gray;"></div>
        <div id="px2" style="float:left; height:100px;margin-left:150px;margin-right:150px; width:100%; background-color:red;"></div>
        <div id="px3" style="position:absolute; right:0px;height:100px; width:150px; background-color:green;"></div>
    </div>

　　结果是：（浅灰色是html页面背景颜色）

　　可以发现：左右2个 absolue 的div元素都乖乖的没有问题，倒是中间的红色div 明显变长了，突出了一部分。用Chrome调试，发现是右边的绿色div覆盖在了中间的红色div上，并且红色div整体是宽500px。

　　应该说，它的 margin-left 起作用了，但是宽度100%，却变成了宽度500px，并且仿佛 margin-right 丝毫不起作用。

　　4. 去掉 margin-*

　　后来把 margin-left 去掉，发现正常了。（其实就是绿色和灰色把红色的左右两边遮住了而已，其实红色还是500px）。

    <div style="width:500px;position:absolute;left:200px;top:100px;" >
        <div id="px1" style="position:absolute; left:0px;height:100px; width:150px; background-color:green;"></div>
        <div id="px2" style="float:left; height:100px; width:100%; background-color:red;"></div>
        <div id="px3" style="position:absolute; right:0px;height:100px; width:150px; background-color:gray;"></div>
    </div>