html - 如何扩展ul和li的div容器？

Question

我有一个包含内容的 div(里面有列表)，

<div id="container">
     <ul id="list">
       <li>
         <div class="title">
              something
         </div>
         <div class="text">
             something again
         </div>
       </li>
        <li>
         <div class="title">
              something
         </div>
         <div class="text">
             something again
         </div>
       </li>
    </ul>
</div>

我的列表中的元素显示为 float:left，我希望 div 容器在其内容中扩展高度。

#container{ 
    position: relative; 
    width: 100%;    
    padding-bottom: 30px;       
}

#list{
    position: relative;
    padding-top: 80px;
    width: 95%;
    /*height: 100%;*/
    padding-bottom: 10px;
}

#list li{
    position: relative;
    float: left;    
    list-style: none outside none;
    width: 20%;
    height: 170px;  
    /*border:1px solid black;*/
}

Answer 1

您有多种选择:

1. Clearfix在容器上:

   #container:after {
       clear: both;
       content: "";
       display: table;
   }
   

2. The use 溢出:

   #container {
       overflow: hidden; /* or: auto | scroll */
   }
   

3. float 容器:

   #container {
       float: left;
   }
   

4. 对列表项使用 inline-block 而不是 float:

   #container ul li {
       display: inline-block;
       float: none;
   }