Div 容器不包裹子内容答案

【问题标题】：Div Container Not Wrapping Around Child ContentDiv 容器不包裹子内容
【发布时间】：2013-08-10 03:01:58
【问题描述】：

我正在创建一个“圆角”容器，用于自定义弹出窗口和工具提示。最初，我使用 3x3 表格和圆角 png 作为角落内容。

这些圆形 png 为 24x24，您可以看到它如何立即为我的内部内容强制设置 24 像素的边距。我想将标记转换为 Divs 以获得更多的边距/填充灵活性。

我真的希望顶部的 24 像素渐变具有专业外观。我几乎完成了 Div 容器，但我遇到了一个硬树桩！我无法让容器 div 动态扩展以包含子内容！到目前为止，这是我的代码。为了您的清楚起见，我删除了背景图片并用简单的背景颜色替换了它们。

<div id="container" style="position: absolute; width: 200px; height: 100px;">
        <div id="topLeft" style="background-color: Aqua; position: absolute; width: 24px;
            height: 24px; top: 0px; left: 0px;">
        </div>
        <div id="topRight" style="background-color: Aqua; position: absolute; width: 24px;
            height: 24px; top: 0px; right: 0px;">
        </div>
        <div id="bottomLeft" style="background-color: Aqua; position: absolute; width: 24px;
            height: 24px; bottom: 0px; left: 0px;">
        </div>
        <div id="bottomRight" style="background-color: Aqua; position: absolute; width: 24px;
            height: 24px; right: 0px; bottom: 0px">
        </div>
        <div id="topFill" style="background-color: Lime; position: absolute; top: 0px; left: 24px;
            right: 24px; height: 24px;">
        </div>
        <div id="leftFill" style="background-color: Yellow; position: absolute; width: 24px;
            left: 0px; bottom: 24px; top: 24px;">
        </div>
        <div id="bottomFill" style="background-color: Lime; position: absolute; height: 24px;
            bottom: 0px; left: 24px; right: 24px;">
        </div>
        <div id="rightFill" style="background-color: Yellow; position: absolute; width: 24px;
            top: 24px; right: 0px; bottom: 24px;">
        </div>
        <div id="middleFill" style="background-color: Fuchsia; position: absolute; left: 24px;
            right: 24px; top: 24px; bottom: 24px;">
        </div>
        <div id="contentContainer" style="top: 0px; left: 0px; white-space: nowrap; position: absolute;">
            ALongStringOFTEXTThatDoesNotBreakToForceTestIfTheDivWillProperlyExpand
        </div>
    </div>

感谢任何能让我摆脱困境的人！顺便说一句，这篇文章是经过数小时的研究和理智的丧失。 ;-)

【问题讨论】：

标签： html

【解决方案1】：

请看这个问题

how to wrap float div around absolute position divs?

您的所有 DIV 不再是对象流的一部分。所以容器不会环绕它们。我面临同样的问题，我想我们必须依靠 JS 手动设置容器的高度。

【讨论】：

【解决方案2】：

您将容器高度固定为 100 像素。难怪没有显示其他 div。去掉 height:100px 部分，如果真的需要添加 overflow:hidden 容器会自己获取高度。

【讨论】：

显然您还没有亲自尝试过代码。如果删除了宽度和高度值，则包含的 div 会折叠。溢出：隐藏也不起作用。我更愿意使用表格，因为如果内容大于其边界，它将动态扩展超出其宽度值。但是（叹气）我会回到原来的问题。

【解决方案3】：

首先，您需要学习使用层叠样式表 (CSS)。这将减少一百万个问题，并且可以让您做更多事情。如果您决定使用css，您甚至可以在没有图像的情况下绕过您父母div 的角落！！哇！我知道这样想很疯狂，但这是真的。

我不知道你想做什么，但你可以尝试这样的事情：(HTML)

<div class="wrapper">
    <div class="topR">

    </div>
    <div class="topL">

    </div>
    <div class="content">

    </div>
    <div class="bottomR">

    </div>
    <div class="bottomL">

    </div>
</div>

现在是样式：(CSS)

.wrapper {
margin: 0 auto; /* Centers the div */
border-radius: 4px 4px 0 0; /* this will round the top two corners of the main container */
background: #ffffff;
width: 200px;
}

.topR{
float: right;
background: #ffffff;
width: 24px;
}

等等。如果你有一个div class="wrapper"> 或主容器来存放它们而没有固定的高度，你应该没问题。

您也可以随时使用overflow: auto;，这将隐藏容器外的任何内容，并允许您滚动将内容扔到该 div 内。

祝你好运，希望对你有所帮助。

【讨论】：