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

Question

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

5

<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->li元素，而不是div，但在这种情况下它们的行为是相同的。

感谢您的评论。

以下是额外的示例。在第一个案例中，我们看到两个元素对齐。在第二个案例中，第二个子元素向下移动，因为父元素有最大宽度。我们在右侧得到了空白空间。屏幕截图 - 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;
}

- Antoni Bertel

“children are able to fit on one line” 是什么意思？你的图片引用了第一和第二张图片中不存在的子元素。 - Daemedeor

你还应该尽可能地重新创建你的代码片段以展示它们的奇怪行为。虽然<li>和<div>都是块级元素，但它们仍然有独特的特点。我还建议添加<textarea>，因为你下面的评论之一似乎表明你也在使用<textarea>。 - Daemedeor

以下是其他的例子。在第一个案例中，我们看到两个元素对齐。在第二个案例中，由于父元素具有最大宽度，第二个成员向下移动，我们在右侧得到一个空白的空间。 http://jsfiddle.net/7wwobsqq/8/ http://jsfiddle.net/7wwobsqq/9/ 并且屏幕截图 - http://s4.postimg.org/p4h4bj86l/stack_Overflow2.jpg - Antoni Bertel

3个回答

1

将display: inline-block;添加到.parent，从.child中删除float: left，您将获得预期的行为:

Fiddle

这是您的代码无法正常工作的原因:

W3C定义了用于确定HTML元素尺寸的算法。在这里，.parent是“普通流中的块级非替换元素”。

首先，忽略max-width属性计算出一个临时宽度。对于块级元素，这将是其父元素的宽度减去外边距的宽度，本例中为文档主体的宽度。

如果这个宽度比max-width要大，那么max-width就成为宽度 - 在这种情况下，300px。

就是这么简单。将max-width添加到div中会自动将div设置为该宽度，而不考虑内容。您可以在此Fiddle（没有内容）以及此Fiddle（内容溢出父级）中看到。

以下是我的代码为什么有效的原因：

将display: inline-block;添加到.parent使其成为“inline-block，在正常流中不替换元素”。

由于没有定义宽度，现在使用收缩自适应算法，该算法（顾名思义）缩小容器以适应其内容。

- Rick Hitchcock

@RickHitchcock，对于display:inline-block，这是因为内容试图将容器（在这种情况下是父元素）的宽度作为块元素（块元素“填满整行”），但如果您将其设置为inline，则会像在一行中一样行为。但是，inline-block是一个新的CSS3功能，使它们像块一样行为（每行一个元素，但如果有空间也像内联元素）。 - Daemedeor

谢谢您的评论，但它并没有完全回答我的问题。 - Antoni Bertel

我在上面的问题后添加了更多的示例。 - Antoni Bertel

从.parent中删除min-width，从.child中删除float，并将display: inline-block更改为display: block：http://jsfiddle.net/ecs4tLkL/ - Rick Hitchcock

这是一个问题，因为它没有完全满足原始问题。 - Antoni Bertel

显示剩余6条评论

0

可能您想询问的是这个布局（将inline-block添加到父元素）。这是经典的收缩适合解决方案。

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

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

悬停以查看其更改。

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

父元素被拉伸，试图为子元素腾出空间。当它达到最大宽度时，子元素进入下一行，但父元素的宽度不会重新计算

- vals

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- arjabbar · Accepted Answer

由于您的.parent div具有display: block属性，因此它始终将是100％宽度。这意味着它将占据其父元素的宽度。目前，max-width控制着.parent元素的宽度，因为它希望填充其父元素，但实际上无法做到。

您可能需要像这个示例一样的效果。

请去除.parent的overflow: hidden属性，因为它是不必要的。

同时，您需要在.parent和.child元素上设置display: inline-block属性。这使您可以获得块元素的所有样式优点，但告诉浏览器将它放在同一行中。