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

您有几种选择：

Clearfix：

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

overflow的{{3}}：

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

浮动容器：
```
#container {
    float: left;
}
```

使用inline-block代替float作为列表项：

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

Answer 2

尝试这种方法......

li {
    display: inline-block;
    float: none; /* only if you have this set as you mentioned in your post */
}

#container {
  height: auto;
}

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

2 个答案: