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>

感谢任何能够让我摆脱困境的人！顺便说一下，这篇文章经过了许多小时的研究并失去了理智。 ;-)

来源

2011-10-12 RichardB

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

来源

2011-10-12 16:39:06 sticksu

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

请参阅此问题

how to wrap float div around absolute position divs?

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

来源

2012-05-14 16:46:55 Raffael

首先，您需要学习使用级联样式表（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内的内容。

祝您好运，我希望我能为您提供帮助。

来源

2013-08-09 19:01:58

Div容器不环绕儿童内容

回答

相关问题