Question

当元素的宽度为auto时，它的子宽度为百分比，子项的宽度是如何计算的？我在这里有一个小提琴，表明了混乱：http://jsfiddle.net/w2c3ex21/

这是代码：

HTML：

<div class="parent">
    <div class="column">
        <img width="300" height="300" src="">
    </div>
    <div class="column">
        this is my contents
    </div>
</div>

CSS：

.parent {
    width: auto;
    position: absolute;
}
.column {
    border: 1px solid black;
    background-color: #eee;
    width: 50%;
    float: left;
    box-sizing: border-box;
}

我可能期望，每列的宽度为150px，而不是212px。有人可以解释一下吗？

Answer 1

子宽度是根据父宽度计算的。在这种情况下，您为父级选择auto，因此浏览器确定最佳匹配。通常情况下，对于display:block的{{1}}默认值，或者根据我的理解使用div的元素的父级的100％，这将是100％。

在这种情况下，您使用width:auto基本上将显示更改为position:absolute或inline-block，因此它适合您的内容。

我不确定你为什么期望150px？

Answer 2

请试试这个css

.column img {
    width: 100%;
}

Demo

确定自动宽度父级的子元素评估宽度

2 个答案: