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

时间 2019-12-01

标签 div+css div css 布局问题一个宽度肯定里面三个水平对齐左右两个固定 150px 中间那个充满剩余栏目 HTML 繁體版

原文原文链接

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

　　说明：代码非真实状况下使用，因此直接简单。css

　　没耐心的直接看最后解答。html

　　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根本就没有显示：浏览器

图1布局

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

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

　　修改后：.net

    <div style="width:500px;" >
        <div id="px1" style="position:absolute; left:0px;top: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;top:0px;height:100px; width:150px; background-color:green;"></div>
    </div>

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

图2code

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

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

　　就是说如今左右2个div的父元素是 static 定位（static是默认的定位方式），不符合absolute的定位要求。那怎么办，把那个父div也改成 position: absolute （或者position: relative）呗，因而

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

    <div style="width:500px;position:absolute;left:200px;top:100px;" >
        <div id="px1" style="position:absolute; left:0px;top: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;top:0px;height:100px; width:150px; background-color:green;"></div>
    </div>

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

　　　　图3

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

　　应该说，它的 margin-left 起做用了，可是宽度100%，却变成了宽度500px，而且仿佛 margin-right 丝绝不起做用。

　　【后经GK同窗指导：margin-right起做用了，只是它透明了看不见。至于红色超出部分能够给父div设置属性：overflow:hidden解决，这里也还有问题，见5】

　　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>

　　结果就正常了：

图4

　　可是也就看上去正常，但感受不是符合要求，并无充满“剩余宽度”，而是直接充满“所有宽带”，而后被左右2个absolute的div遮住了左右宽度。

　　若是写上文字，会发现（中间的div文字被遮住了）：

图5

　　5.父div添加overflow的问题（上接3）

    <div style="width:500px;position:absolute;left:200px;top:100px;overflow:hidden" >
        <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>

　　结果如图：中间div的文字被右边遮住了，问题只是被简单的隐藏了。并无解决。

图6

　　六、先贴出一个完美办法，GK同窗的。很清晰，很明确。

<html>
<head>
<title>TEST</title>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    .d0 {
        width: 40%;
        height: 200px;
        margin: 0 auto;
        position: relative;
        min-width: 300px;
    }
    .d1 {
        position: absolute;
        left: 0;
        top: 0;
        width: 150px;
        height: 100%;
        background-color: #CF4D4D;
    }
    .d2 {
        width: auto;
        padding: 0 150px;
        height: 100%;
        background-color: #8F8FCF;
    }
    .d3 {
        position: absolute;
        right: 0;
        top: 0;
        width: 150px;
        height: 100%;
        background-color: #62C262;
    }
</style>
</head>
<body style="background-color:#CCCCCC">
    <div class="d0">
        <div class="d1"><p>左边的内容左边的内容左边的内容左边的内容左边的内容左边的内容</p></div>
        <div class="d2"><p>中间的内容中间的内容中间的内容中间的内容中间的内容中间的内容</p></div>
        <div class="d3"><p>右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容</p></div>
    </div>
</body>
</html>

　　结果以下图：

图7

这里有个更好的文章，讲解三栏布局。　

后记：（2014年2月20日）

最近又看了一次本文，上面有些啰嗦。之因此一直不对，是我对下面2个知识点没理解。

　　　　width: auto 和 width: 100%

　　　　margin 和 padding

GK同窗方法之因此奏效，他用的是

　　 width: auto 和 padding:0 150px

而我用的则是

　　width: 100% 和 margin: 0 150px　

这两者的区别就是：

　　width: 100% 就是本身和父元素的宽度同样是500px，接着 margin: 0 150px，就是本身左边离父元素边界有150px，这么算，本身中间的div天然会超出一部分。

　　　　而且中间div的一部分会被右边（绿色）的div给遮住一部分。如图3。

　　width: auto 由浏览器本身计算div的宽度。GK同窗代码里，因为左右div是绝对定位，不在文档流中，中间div自动充满整个父元素，只不过左右被左边和右边的div遮住了。可是，有趣的是，

　　　　他用的是 padding: 0 150px，这样，中间div内容区域就不会被遮住。以下图：

图8

　　这里关键理解 CSS 中盒模型的 width 指什么区域：

图9

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

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

1. 个人第一反应：

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

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

4. 去掉 margin-*

5.父div添加overflow的问题（上接3）

六、先贴出一个完美办法，GK同窗的。很清晰，很明确。

后记：（2014年2月20日）

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

　　1. 个人第一反应：

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

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

　　4. 去掉 margin-*

　　5.父div添加overflow的问题（上接3）

　　六、先贴出一个完美办法，GK同窗的。很清晰，很明确。