Question

我有div的父display: inline-block和两个浮动的孩子div。当有足够的空间让它们彼此相邻时，父div的高度和宽度完全由孩子决定。

但是当空间不足时 - 让孩子换到下一行并且元素垂直堆叠，父div的宽度保持不变，就像孩子堆叠之前一样，而不是适应大小最大的孩子。

如何解决此问题，以便父级仍然包裹而不是宽度太大？

<div id="parent">
 <div></div>
 <div></div>
</div>

#parent {
    display: inline-block;
    border: solid 2px;
    padding: 10px;
    background-color: #aaaaaa;
}

div > div {
    float: left;
}

div > div:first-child {
    width: 200px;
    height: 200px;
    background-color: yellow
}

div > div:last-child {
    width: 300px;
    height: 300px;
    background-color: blue;
}

Answer 1

这是因为没有清除花车而且我已经能够阅读，没有使用JavaScript，没有直接的解决方案以完全响应的方式执行此操作。

但是对于固定尺寸，有一种方法可以清除浮动并包裹父级：

http://jsfiddle.net/cfL491Lc/

@media screen and (max-width: 555px) {
    div > div:last-child {
        clear: left;
    }
}

使用以下逻辑：断点= div的宽度+填充+ body + 19px滚动条上的边距。

如果没有滚动条，它会过早包裹，但这是媒体查询的限制。根据周围的内容（尤其是总高度），可能需要进行另一次查询。

Answer 2

我没有收到你的问题。在你给出的代码中，外部div的高度和宽度由内部div确定

水平堆叠时

：

外部宽度=内部宽度的总和外高=内高的最大值

<div style="width:auto;height:auto;display: inline-block; border: solid 2px; padding: 10px; background-color: #aaaaaa;">

    <div style="float: left; width: 200px; height: 200px; background-color: yellow;">
    </div>

    <div style="float: left; width: 80px; height: 30px; background-color: blue;">
    </div>


</div>

垂直堆叠

外部高度=内部高度的总和外宽=内宽的最大值

<div style="width:auto;height:auto;display: inline-block; border: solid 2px; padding: 10px; background-color: #aaaaaa;">

    <div style="float: left; width: 200px; height: 200px; background-color: yellow;">
    </div>
<br>
    <div style="float: left; width: 80px; height: 30px; background-color: blue;">
    </div>


</div>

您想在此更改什么？

如何让一个内联块的父亲的宽度缠绕在它的孩子身上？

2 个答案: