为什么 div 和 position:absolute 占据了所有剩余宽度？

Question

我有一个容器 position:relative 和三个 children position:absolute.

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/

children的位置顺序为：左、中、右。

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

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

提前致谢。

Answer 1

这是你需要的吗？

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

只需将它们的宽度增加 33%

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

Answer 2

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

<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;
}

Answer 3

假设您不想要 "equal sizes"，而是“每个 div 扩展以仅填充必要的 space，让所有 div 使用内联-区块：

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

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

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

Answer 4

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

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

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

}

并从 CSS 的第 n 个子部分中删除所有 left: 和 right: 属性，我想你会更接近你正在寻找的结果。您可以对其进行调整，但如果您未能至少定义最大宽度，则可能会冒着最右边的列下降一行的风险。使用浮动列可能不是最好的方法，所以一定要clear:both；重置下面的布局。

box-sizing border-box 属性是为了确保 "width" 属性.

考虑了边框和填充

如果你看到这里：

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

我将第 1 列和第 3 列设置为 max-width: 25%，中心设置为 50%。（我在 .container > div 中取出了 max-width: 33% ）但是，三列永远不会把它带到完整的 100% 宽度，因为中心列中的内容不足以把它带到那里.

为什么 div 和 position:absolute 占据了所有剩余宽度？

Why is this div with position:absolute taking all remaining width?

css

css-position