为啥我的 <div> 离开了他们的父 <div>？ [复制]

Posted 2023-03-06

【中文标题】为啥我的 <div> 离开了他们的父 <div>？ [复制]

【英文标题】：Why are my <div>s leaving their parent <div>? [duplicate]为什么我的 <div> 离开了他们的父 <div>？ [复制]

【发布时间】：2013-05-12 16:15:42

【问题描述】：

我很困惑。我希望 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%;

【问题讨论】：

默认情况下，父元素永远不会扩展以包含浮动子元素，因为浮动元素已从正常流程中移除。

【参考方案1】：

父母通常会扩大到他们孩子的高度，但不会在孩子漂浮的情况下。

您可以移除浮动来完成扩展。 为了扩展基于浮动子元素的 parentdiv，请尝试在 .pictureBox 上使用 overflow: auto;。这将使 .pictureBox 扩展到其子项的高度。这是显示结果的Fiddle。

【讨论】：

工作，谢谢！我已经做 CSS 好几个月了，甚至不知道 overflow: auto; 是一件事。很酷的意思，谢谢！编辑：我必须等待 11 分钟才能将其标记为“已回答”……这似乎很愚蠢。

不客气。事实上overflow: auto; 让浏览器决定overflow 的值是什么。虽然我倾向于使用auto，因为divs 可能会超出浏览器高度，因此需要滚动条。

@SamuelStiles，您可能还想查看 css 属性 clear

不仅如此，还有级联是如何工作的以及这样做的结果是什么property: value; property: other value;