将父 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 位置更改为相对位置，它解决了我的问题！

Answer 1

简单回答

只需从ol 中删除浮动。但是，如果您需要浮动它，则可以选择以下之一：

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