css - 为什么我的离开他们的父母?

Question

我很困惑。我希望 2 个 div 的内容根据子 div 的大小动态扩展其父 div 的高度；最大为 600 像素——但它们只是重叠并且尺寸没有增加。有人介意提供一些见解吗？显然我在这里遗漏了一些东西。

这是正在发生的事情：

http://puu.sh/2Vexi.png

这是我的html：

<div class="pictureBoxContainer">
    <div class="pictureBox">
        <div class="pBoxLeftColumn">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit perspiciatis nihil explicabo quasi veritatis ipsum. 
        </div>
        <div class="pBoxRightColumn">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, architecto quis quaerat excepturi maxime.
        </div>
    </div>
</div>

这是我的CSS：

.pictureBoxContainer {
    padding: 12px;
    clear:left;
    clear:right;
    width: 100%;
    background-color: #eee;
    border-radius: 4px;
    max-height: 600px;
}

.pictureBox {
    border: 1px solid #ee5;
    width:100%;
}

.testp {
    padding: 10px;
}

.pBoxLeftColumn {
    display: block;
    float: left;
    max-width: 49.99%;
}

.pBoxRightColumn {
    display: block;
    float: right;
    max-width: 49.99%;
}

Answer 1

父母通常会膨胀到孩子的高度，但不会在孩子漂浮的情况下。

• 您可以删除浮动以完成扩展。
• 为了扩展基于浮动子元素的 parentdiv，请尝试overflow: auto;使用 .pictureBox。这将使 .pictureBox 扩展到其子项的高度。这是一个显示结果的小提琴。