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

Question

为什么div＆＃34;内容＆＃34;根据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＃内容，除了自动高度，它仍然没有根据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 }

更新

此外，您需要从position: absolute

中删除ol