css - Parent Div 不会垂直展开

Question

我有一个父 div(容器)，它有一个子 div(内部)，子 div(内部)也有动态创建的子 div。我正在使用 jquery 在 #inner 的溢出上水平滚动。我的问题是，虽然我不希望#container 水平扩展，但我确实希望它垂直扩展，但它不会扩展到#inner 的全高。我曾尝试在#inner 之后添加一个清晰的 div，但这没有用。我还尝试将 #container 的显示更改为 display:inline 和 display:inline-block。内联垂直扩展 #container 到适当的高度，但基本上将溢出更改为自动，这样即使溢出设置为隐藏，您也可以在底部看到水平滚动条。我的目标是在让 #container 垂直扩展到它的子内容时有一个垂直滚动条而没有水平滚动条。那有意义吗？这是我的标记...

<div id="container">
   <div id="inner">
       <div class="post">
           <p>content</p>
       </div>
       <div class="post">
           <p>content</p>
       </div>
       <div class="post">
           <p>content</p>
       </div>
   </div>
   <div class="clear"></div>
</div>

还有CSS...

body {
    margin:0;
    padding:0;
    height: 100%;
    line-height: 1.2em;
    font: normal 12px 'Helvetica','Arial','Verdana','sans-serif';
    color:#E0DFE3;
    background:#dad3c1 url(../images/duck-bg1500x.jpg) no-repeat fixed;
}
#container {
    overflow:auto;
    border:#888888 solid 1px;
    margin:10px;
}
#inner {
    position:relative;
    top:100px;
 width:3600px;
    margin:0;
    padding:0;
}
.post {
    background:url("http://www.loodieloodieloodie.com/images/opac-bg2.png") repeat scroll transparent !important;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
    width: 600px;
    padding: 20px;
    position: relative;
    top:50px;
    margin: 0 25px;
    float:left;
}
.clear {
    clear:both;
}

提前感谢您提供的所有帮助，B

Answer 1

我认为您的问题来自于在您的子元素上使用相对位置。如果您将它们切换为使用边距进行定位，容器将更像您想要的那样容纳内容(我认为)。试试这个 CSS!

body {
    margin:0;
    padding:0;
    height: 100%;
    line-height: 1.2em;
    font: normal 12px 'Helvetica','Arial','Verdana','sans-serif';
    color:#E0DFE3;
    background:#dad3c1 url(../images/duck-bg1500x.jpg) no-repeat fixed;
}
#container {
    overflow:scroll;
    border:#888888 solid 1px;
    margin:10px;
}
#inner {
    width:3600px;
    margin:0;
    padding:0;
}
.post {
    background:url("http://www.loodieloodieloodie.com/images/opac-bg2.png") repeat scroll transparent !important;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
    width: 600px;
    padding: 20px;
    position: relative;
    margin: 50px 25px;
    float:left;
}
.clear {
    clear:both;
}