html - 为什么这个 div 不包含英国

Question

     <div class="pull_down">
       <ul class="zvuc">
         <li class="prod">
           <div class="conutine">
             <div class="prod_name"><a href="">Asus 15.6-Inch Versati...</a></div>
             <img src="../images/test/lotr.jpg">
             <div class="timer"></div>
           </div>
         </li>
         </ul>
        </div>

CSS:

div.pull_down
{
    padding: 20px 20px 20px 30px;
}

li.prod
{
    background: url("../images/test/bg-horizontal.png") no-repeat;
    height: 286px;
    width: 170px;
    text-align: center;
    padding-top: 0;
    display: list-item;
    width: 170px;
    min-height: 286px;
    float: left;

}
ul
{
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-align: left;
}

当我将鼠标悬停在带有 Firebug 的分区上时，它不包含任何内容。这是为什么？

Answer 1

您正在 float 您的 LI，因此您很可能需要对父 DIV 进行“clearfix”。

“clearfix”将强制元素自行清除它的子元素。

http://css-tricks.com/snippets/css/clear-fix/

演示:http://jsfiddle.net/wdm954/Dxkpx/

您只需将 .group 类添加到您的 CSS 文件并将 class="group" 添加到您需要清除修复的任何父级。

这是一种语义化且可扩展的解决方案。您应该避免将空的 DIV 添加到您的标记中或将额外的 CSS 添加到父级(例如 float )。从长远来看，这可能会产生不良结果并变得困惑。