Question

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

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占用所有剩余宽度？

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

提前致谢。

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

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

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

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

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

Answer 4

中心列拉伸的原因是你指定：left：0;和右：0;将柱子的边缘一直推到适合的位置。

如果您更改.container＆gt; div喜欢这样：

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

}

并删除CSS中nth-child部分的所有left：和right：属性，我想你会更接近你想要的结果。您可以对其进行调整，但如果您未能定义至少一个最大宽度，则可能会使最右侧列的下降风险下降。使用浮动列可能不是最好的方法，所以一定要明确：两者;重置下面的布局。

box-sizing border-box属性用于确保使用“width”属性考虑边框和填充。

如果你在这里看到：

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

我将第1列和第3列设置为最大宽度：25％，中心设置为50％。（我在.container＆gt; div中取出了最大宽度：33％）但是，三列从不将它带到100％的宽度，因为中间列中的内容不足以将其带到那里。

为什么这个div有位置：绝对占用所有剩余宽度？

4 个答案: