html - 宽度属性的意外行为

Question

我在一行中有三个 div，它们的显示属性设置为表格单元格。它们都被父 div 包裹起来。我需要内部 div 具有相同的宽度，因此我将其设置为 33%。但是宽度的行为很奇怪。如果设置了 33%，则 div 不会拉伸(stretch)到最大值。但是如果我设置 1%，则所有三个元素的宽度都相等并拉伸(stretch)到最大值。为什么会这样？我的 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/