Div容器不环绕儿童内容
我正在创建一个“圆角”容器,我将用它来定制弹出窗口和工具提示。原来,我用我的圆形png作为角落内容的3x3桌子。Div容器不环绕儿童内容
这些圆角的png是24x24,你可以看到它如何立即强制我的内容的24px页边距。我想将标记转换为Divs以获得更多的边距/填充灵活性。
我真的想在专业外观的顶部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>
感谢任何能够让我摆脱困境的人!顺便说一下,这篇文章经过了许多小时的研究并失去了理智。 ;-)
您将容器高度固定为100px。难怪其他div没有显示出来。 删除高度:100px的部分,如果真的需要添加溢出:隐藏和容器将自己获得高度。
请参阅此问题
how to wrap float div around absolute position divs?
你的所有div是对象流不再一部分。所以容器不会环绕它们。 我面临同样的问题,我想我们必须依靠JS手动设置容器的高度。
首先,您需要学习使用级联样式表(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内的内容。
祝您好运,我希望我能为您提供帮助。
显然你还没有尝试过自己的代码。如果删除宽度和高度值,则包含的div会折叠。溢出:隐藏也不起作用。我更愿意使用表格,因为如果内容大于边界,它将动态扩展超出其宽度值。但(叹气)我会回到我原来的问题。 – RichardB