如何使框元素自动展开？答案

【问题标题】：How Can I Make a Box Element Expand Automatically?如何使框元素自动展开？
【发布时间】：2013-11-26 15:59:18
【问题描述】：

下面的链接显示了我正在开发的网站的简化版本以及我遇到的问题。

我有几个封装的盒子元素。有一个主容器，该容器中的几个 div 将保存内容，随着内容的扩展，我需要 容器 div 自动扩展。除非我在 CSS 中添加特定高度，否则我似乎无法做到这一点。

HTML：

<body>
<div id="container">
    <div id="block1">
        <div id="one">one</div>
        <div id="two">two<br />two<br /></div>
        <div id="three">three<br />three<br />three<br /></div>
        <div id="four">four<br />four<br />four<br />four<br /></div>
    </div>
</div>
</body>

CSS：

#container {
width: 1050px;
margin: auto;
padding: 5px;
background-color: #ededf0;
background: 
   url("http://wguayan.comuv.com/brushed_metal_clear_apple.jpg") repeat;
}

#one, #two, #three, #four {
border-width: 1px;
border-color: black;
border-style: solid;
background-color: white;
border-radius:6px;
-moz-border-radius:6px;
/* Firefox 3.6 and earlier */
}

#one {
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}

#two {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 5px;
text-align: center;
box-shadow: 9px 9px 12px #888888;
}

#three {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}

#four {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}

#block1 {
width: 100%;
border-width: 1px;
border-color: black;
border-style: solid;
}

【问题讨论】：

标签： html css css-float collapse

【解决方案1】：

只需将overflow: hidden 应用于#block1

【讨论】：

救命稻草，+1，谢谢！
这个建议有效，但是，我遇到了基本相同的问题。如果您查看我的 CSS，您会发现我故意将顶部和左侧的相对定位归零。所以现在的问题是，当我开始使用定位移动 DIVS，并且它们充满内容并展开时，它们会展开超出正文元素：jsfiddle.net/wguayan/drWSj