html - Div 容器不环绕子内容

Question

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

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

我真的想要顶部的 24px 渐变以获得专业外观。我几乎完成了 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>

感谢任何能把我从困惑中拉出来的人!顺便说一句，这篇文章是在经过数小时的研究和失去理智之后发表的。 ;-)

Answer 1

请看这个问题

how to wrap float div around absolute position divs?

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