html - 父元素错误地计算了其子元素的宽度

Question

请看演示:http://jsfiddle.net/7wwobsqq/1/

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

.parent {
    max-width: 300px;
    background: grey;
    overflow: hidden;
}

.child {
    float: left;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin-bottom: 10px;
}

我的问题是父元素计算了它的宽度，却没有注意到 block 在不同的行上这一事实。

然后对于这个例子，我想父级已经缩小到 block 的最大宽度。另外，如果 children 能够排在一条线上，他们就应该在那里。为了帮助您理解我的意思，请看一下屏幕截图: http://s21.postimg.org/ioldq2blj/stack_Overflow.jpg

目前我使用的是 ul->li 元素，而不是 div，就像在 jsfiddle 页面上一样，但在这种情况下它们的行为是相同的。

感谢评论。

这里是额外的例子。在第一种情况下，我们看到两个元素对齐。在第二种情况下，第二个子元素向下移动，因为父元素具有 max-width。我们在右边有一个空位。截图 - http://s4.postimg.org/p4h4bj86l/stack_Overflow2.jpg http://jsfiddle.net/7wwobsqq/8/ http://jsfiddle.net/7wwobsqq/9/

<ul class="parent">
   <li class="child first">
   </li>
   <li class="child second">
   </li>
</ul>

.parent {
    border: 1px dashed #ccc;
    float: left;
    min-width: 333px;
    max-width: 500px;
    overflow: hidden;
}

.child {
    margin: 2px;
    float: left;
    display: inline-block;
    background-color: rgb(255, 216, 87);
}

.first {
    width: 126px;
    height: 127px;
}

.second {
  width: 207px;
  height: 122px;
}

Answer 1

您的 .parent div 始终为 100% 宽度，因为当您有一个 display: block 元素时会发生这种情况。它将占用其父元素的宽度。现在 max-width 正在控制您的 .parent 元素的宽度，因为它想要填充它的父元素，但它不能。

你可能想要像 this 这样的东西.

去掉 .parent 上的 overflow: hidden，这是不必要的。

此外，您需要在 .parent 和 .child 元素上设置 display: inline-block。这为您提供了 block 元素的所有样式优势，但告诉它您需要它与其兄弟元素位于同一行。