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

请看演示: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;
}

我的问题是父元素计算它的宽度,而没有注意块在不同的行上的事实.

然后对于这个例子,我想父母已经缩小到块的最大宽度.此外,如果孩子们能够适应一条线路,他们应该在那里.
为了帮助您理解我的意思,请查看屏幕截图:
http://s21.postimg.org/ioldq2blj/stack_Overflow.jpg

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

感谢您的评论.

以下是其他示例.在第一种情况下,我们看到两个元素对齐.在第二种情况下,第二个子项向下移动,因为父元素具有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;
}
最佳答案
您的.parent div总是100%宽度,因为当您有一个display:block元素时会发生这种情况.它将占用它的父元素的宽度.现在max-width控制.parent元素的宽度,因为它想要填充它的父元素,但它不能.

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

摆脱溢出:隐藏在.parent上,这是不必要的.

此外,您需要在.parent和.child元素上设置display:inline-block.这为您提供了一个块元素的所有样式特权,但告诉它您需要它与它的兄弟姐妹在同一条线上.

转载注明原文:html – 父元素错误地计算其子元素的宽度 - 代码日志