Question

我在一行中有三个div，他们的display属性设置为table-cell。它们全部由父div包裹。我需要内部div具有相等的宽度，所以我将其设置为33％。但宽度的行为很奇怪。如果设置了33％，则div不会拉伸到最大值。但是如果我设置为1％，则所有三个元素的宽度都相等并且拉伸到最大值。为什么会这样？我的CSS中有什么问题吗？

这是我的代码：

<div class="parent">
    <div class="child">Ut molestie consequat viverra.</div>
    <div class="child">Pellentesque</div>
    <div class="child">Aliquam lobortis</div>
</div>
.parent {
    display: table;
    border-collapse: separate;
    border-spacing: 25px;
}
.child {
    display: table-cell;
    padding: 2px 10px 5px;
    background: #eee;
    border: 1px solid #ccc;
    width:1%;
}

Answer 1

您没有为父div指定宽度。

您可以为父div指定宽度为100％并检查

.parent {
    display: table;
    border-collapse: separate;
    border-spacing: 25px;
    width:100%
}

http://jsfiddle.net/23JEc/

width属性的意外行为

1 个答案: