为什么这个带有 position:absolute 的 div 占据了所有剩余的宽度？答案

【问题标题】：Why is this div with position:absolute taking all remaining width?为什么这个带有 position:absolute 的 div 占据了所有剩余的宽度？
【发布时间】：2015-01-20 05:13:55
【问题描述】：

我有一个 position:relative 和三个孩子的容器位置：绝对。

HTML

<div class="container">
    <div>left</div>
    <div>middle</div>
    <div>right</div>
</div>

CSS

div{
    border:1px solid;
}

.container{
    height:200px;
    position:relative;
}

.container > div{
    height:190px;
    position:absolute;
}

.container > :nth-child(1){
    background:red;
    left:0;    
}

.container > :nth-child(2){
   //background:green;
   margin:auto;
   left:0;
   right:0;
}

.container > :nth-child(3){
    background:blue;
    right:0;
}

http://jsfiddle.net/7xqwrtq2/

孩子的位置顺序如下：左、中、右。

如何防止居中的 div 占据所有剩余宽度？

我希望它像其他宽度调整为内容。我也不想设置固定宽度。

提前致谢。

【问题讨论】：

你的意思是你想让它们的宽度相等吗？
因为您没有为绝对定位的子 div 指定宽度，所以第二个子 div 从 left:0px 开始，到 right 0px 结束，最终是其父 div 的 100% 宽度
@BalajiViswanath 感谢您对第二个孩子的解释，但我不明白为什么它只与第一个孩子重叠，正如您在 jsfiddle 中看到的那样。为什么会这样？
实际上第一个和第三个孩子都与第二个重叠。之所以看不到，是因为老三在老二之上。在第二个孩子上尝试 z-index: 2 。您会注意到它将与第一个和第三个孩子重叠

标签： css css-position

【解决方案1】：

您正在寻找的那种布局无法通过绝对定位来实现。您必须改用浮点数。

<div class="container">
    <div>left</div>
    <div>right</div>
    <div>middle</div>
     <div class="clear"></div>
</div>

div{
    border:1px solid;
}

.container{
    height:200px;
    position:relative;
}

.container > div{
    height:190px;
}

.container > :nth-child(1){
    background:red;
    float: left;
}

.container > :nth-child(2){
   //background:green;
   float: right;
}

.container > :nth-child(3){
    background:blue;
    overflow: hidden;
}

.clear{
    clear: both;
}

【讨论】：

【解决方案2】：

这是你需要的吗？

http://jsfiddle.net/7xqwrtq2/1/

只需为它们添加 33% 的宽度

.container > div{
    height:190px;
    position:absolute;
    width:33%;
}

【讨论】：

【解决方案3】：

中心列被拉伸的原因是因为您指定：left：0；右：0；将列的边距一直推到适合的位置。

如果您像这样更改 .container > div：

.container > div{
height:190px;
max-width: 33%;
box-sizing: border-box;
float: left;

}

并从 CSS 的 nth-child 部分中删除所有 left: 和 right: 属性，我认为您会更接近您正在寻找的结果。你可以调整它，但如果你没有定义至少一个最大宽度，你可能会冒着你最右边的列掉下一行的风险。使用浮动列可能不是最好的方法，所以一定要清除：both;重置下面的布局。

box-sizingborder-box 属性是为了确保将边框和填充与“width”属性一起考虑。

如果你看到这里：

http://jsfiddle.net/7xqwrtq2/6/

我将第一列和第三列设置为最大宽度：25%，将中心设置为 50%。（我在 .container > div 中取出了 max-width: 33%）但是，这三列从未将其带到完整的 100% 宽度，因为中心列中的内容不足以将其带到那里。

【讨论】：

【解决方案4】：

假设您不想要“大小相等”，而是“每个 div 扩展以仅填充必要的空间，让所有 div 使用 inline-block：

.container > div{
    height:190px;
    display: inline-block;
}

并使用 :nth-child 选择器仅更改颜色。

这是显示它的 JSFiddle。 http://jsfiddle.net/7xqwrtq2/5/

【讨论】：