HTML DIV无法正常显示

我有一个相当简单的HTML格式来显示一些财务信息.出于某种原因,jQuery(实际上,Firebug!)似乎没有更新父div的可视显示.如果您在浏览器中查看此内容,则更容易看到.

我正在使用Bluetrip CSS框架.

这是HTML:

  

    
Recently added

    

      

        

          

            date
          

          

            w/d
          

          

            deposit
          

          

            category
          

          

            user
          

          

            account
          
        

        

          

            2009-09-29
          

          

            $2,233.00
          

          

             
          

          

            Entertainment
          

          

            Tim
          

          

            Checking
          

        

        


        

          

            2009-09-29
          

          

            $5,555.00
          

          

             
          

          

            Groceries
          

          

            Tim
          

          

            Checking
          

        

        


        

          

            2009-09-29
          

          

            $5,555.00
          

          

             
          

          

            Groceries
          

          

            Tim
          

          

            Checking
          

        

        


        

          

            2009-09-29
          

          

            $123.00
          

          

             
          

          

            Groceries
          

          

            Tim
          

          

            Checking
          
        

        


        

          

            2009-09-29
          

          

            $223.00
          

          

             
          

          

            Entertainment
          

          

            Tim
          

          

            Savings
          

        

        


        

          

            2009-09-29
          

          

            $998.00
          

          

             
          

          

            Entertainment
          

          

            Tim
          

          

            Savings
          

        

        


        

          

            2009-09-29
          

          

            $20.00
          

          

             
          

          

            Groceries
          

          

            Tim
          

          

            Checking
          

        

        

      
    
  

这是CSS:

    /* @override http://localhost:3000/stylesheets/dough.css */

    body {
        background-color: #E5E5E5;
    }

    .main, .sidebar {
        background-color: white;
        padding-top: 8px;
    }

    .clear {
        clear: both;
    }

    .txn {
        clear: both;
    }

    .cell {
        float:left;
        margin-right: 10px;
        font-size: 14px;
    }

    .cell.date {
        width: 110px;
    }

    .cell.wd {
        width: 110px;
        text-align: right;
    }

    .cell.deposit {
        width: 110px;
        text-align: right;
    }

    .cell.category {
        width: 110px;
    }

    .cell.user {
        width: 110px;
    }

    .cell.account {
        width: 110px;
    }

如果你在Firebug(或Safari的inspect元素)中看到这个,你会发现jQuery调用实际上正在改变#txn-41 div的风格,但它在浏览器中没有改变.

为什么#txn-41 div不可见？它的内容是可见的,但我似乎无法对父母施加效果!

谢谢你的帮助!

这可能是因为它的所有儿童div都漂浮了.浮动元素对其容器的高度没有贡献(我相信在IE中除外),所以在你的情况下,你的#txn-41div可能高度为0.

如果你添加一个"清除"div作为应解决它的最后一个孩子(如果这实际上是问题):

还有一些CSS方法可以通过添加清除浮动的内容自动为您执行此操作.

这是一篇很好的文章,解释了这个问题,它也显示了修复它的CSS方法(不需要额外的标记).简而言之,将此添加到您的#txn-41div:

#txn-41:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

(或使它成为一个班级)

我刚刚阅读了这篇关于解决问题的其他方法的Sitepoint文章,包括仅仅声明外部包含div的简单方法overflow: auto.不知何故,这有效.

#txn-41 { overflow: auto; }