html - 将父 div 缩小到与其子 div 相同的大小

Question

为什么 div "content"不根据 ol 中的内容调整高度？

此外，如果我从内容 ID 中删除 min-height:280px，它会完全删除 div

我的 html 和 css 代码:

            <aside id="top10-side">
                <div id="title"><span class="icon-stats-bars"></span>Top 10</div>
                <div id="content">
                    <ol>
                        <li><div class="note">9,43</div><span class="name">Test</span></li>
                    </ol>
                </div>          
            </aside>

            aside#top10-side{
                position: relative;
                width: 18%; /* 49.8% */
                right: 15px;
                height: auto;
                background-color: #f2f2f2;
                border-radius: 3px;
            }

            div#title {
                position: relative;
                height: 35px;
                background-color: #dddddd;
                text-align: left;
                line-height: 35px;
                font-size: 14px;
                font-weight: bold;
            }


            div#content {
                border: 0px solid green;
                position: relative;
                min-height: 280px;
                height: auto;
                width: 90%;
                margin: auto;
            }

            div#content ol{
                position: absolute;
                width: 100%;
                height: auto;
                margin: auto 0px auto 0px;
                list-style-type: none;
                border: 1px solid red;
            }

            div#content li {
                margin: 10px 0px 10px 0px;
            }

我已经设置div#content 和aside 为自动高度，它仍然没有根据ol 大小调整大小

我将 ol 位置更改为 relative，它解决了我的问题!

Answer 1

简单的回答

只需从 ol 中移除 float 。但是如果你需要 float 它，那么以下之一:

1.

div#content{ float: left }

或

2.

<div id="content">
    <ol>
        <li><div class="note">9,43</div><span class="name">Test</span></li>
    </ol>
    <div class="clear"></div>
</div>

还有 CSS:

.clear{ clear: both }

更新

此外，您需要从 ol

中删除 position: absolute