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;
}

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

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

目前我正在使用ul-＆gt; 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

将char_set['k']添加到display: inline-block;，然后从.parent移除float: left，您就会得到预期的行为：

Fiddle

<小时/> 这就是您的代码不起作用的原因：

W3C定义algorithm以确定HTML元素的维度。在此，.child是“block-level, non-replaced element in normal flow。”

First，忽略.parent属性计算暂定宽度。对于块级元素，这将是其父级的宽度减去边距 - 在本例中是文档正文的宽度。

如果此宽度大于 <{1}}，那么max-width将成为宽度 - 在本例中为max-width。

就这么简单。无论内容如何，向max-width添加300px会自动将max-width设置为该宽度。您可以在此 Fiddle （无内容）以及此Fiddle（内容溢出父级）中看到。

<小时/> 这就是我的代码工作的原因：

将div添加到div会使其成为“inline-block, non-replaced element in normal flow。”

由于没有定义的宽度，现在使用shrink-to-fit algorithm，其中（对于其名称而言），将容器缩小以适合其内容。

Answer 2

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

您可能需要this之类的内容。

在overflow: hidden上删除.parent，这是不必要的。

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

Answer 3

可能你想询问这个布局（将内联块添加到父级）这是经典的缩小到适合的解决方案。

＆＃13;

.parent {
    max-width: 300px;
    background: grey;
    overflow: hidden;
    display: inline-block;
}

.child {
    float: left;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin-bottom: 10px;
}

.parent:hover .child {
    width: 120px;
}

＆＃13;

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

＆＃13;

将鼠标悬停在变化中。

它的行为方式是因为渲染算法中没有循环（顺便说一句，这可能导致无限循环）

父母正在伸展，试图为孩子们腾出空间。当它达到最大宽度时，孩子会进入下一行，但父母的宽度不会被重新计算

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

3 个答案: