Question

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

这些圆形的png是24x24，你可以看到它如何立即为我的内容强制24px的余量。我想将标记转换为Div，以获得更多的边距/填充灵活性。

我真的希望在专业外观上有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来手动设置容器的高度。

Answer 2

您将容器高度修正为100px。难怪其他div没有显示出来。删除高度：100px部分，如果真的需要添加溢出：隐藏，容器将自己获得高度。

Answer 3

首先，您需要学习使用级联样式表（CSS）。这将导致少数百万问题，并可以让你做更多。如果您决定使用css，您甚至可以在没有图像的情况下绕过父div的角落！的Wooo！我知道这很疯狂，但这是真的。

我无法准确说出你要做什么，但你可以尝试这样的事情：（ 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容器不包围儿童内容

3 个答案: