Question

我认为这是一种相当简单的HTML格式，可以显示一些财务信息。出于某种原因，jQuery（实际上，Firebug！）似乎没有更新父div的可视显示。如果你在浏览器中查看它，这将更容易看到。

我正在使用Bluetrip CSS框架。

这是HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=us-ascii" />
<link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection" />
<!--[if IE]>
            <link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection" />
<![endif]-->
<link rel="stylesheet" href="test.css" type="text/css" media="screen, projection" />
<link href="jquery.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script>
  $(function() {
    $('#txn-41').css("background-color", 'yellow')
  });
</script>
</head>

<body>
<div class="container">
<div class="main span-19">
  <div class="span-19 push-1">
    <h2>Recently added</h2>

    <div id="transaction-list">
      <div id="transactions">
        <div class="header">
          <div class="cell span-3">
            date
          </div>

          <div class="cell span-3">
            w/d
          </div>

          <div class="cell span-3">
            deposit
          </div>

          <div class="cell span-3">
            category
          </div>

          <div class="cell span-3">
            user
          </div>

          <div class="cell span-3">
            account
          </div>
        </div>

        <div id="txn-41">
          <div class="cell date" title="Monday September 21, 2009">
            2009-09-29
          </div>

          <div class="cell wd">
            $2,233.00
          </div>

          <div class="cell deposit">
            &nbsp;
          </div>

          <div class="cell category">
            Entertainment
          </div>

          <div class="cell user">
            Tim
          </div>

          <div class="cell account">
            Checking
          </div>

        </div>

        <div id="edit-txn-41" style="display: none; clear: both;"></div>

        <div id="txn-40">
          <div class="cell date" title="Monday September 21, 2009">
            2009-09-29
          </div>

          <div class="cell wd">
            $5,555.00
          </div>

          <div class="cell deposit">
            &nbsp;
          </div>

          <div class="cell category">
            Groceries
          </div>

          <div class="cell user">
            Tim
          </div>

          <div class="cell account">
            Checking
          </div>

        </div>

        <div id="edit-txn-40" style="display: none; clear: both;"></div>

        <div id="txn-39">
          <div class="cell date" title="Monday September 21, 2009">
            2009-09-29
          </div>

          <div class="cell wd">
            $5,555.00
          </div>

          <div class="cell deposit">
            &nbsp;
          </div>

          <div class="cell category">
            Groceries
          </div>

          <div class="cell user">
            Tim
          </div>

          <div class="cell account">
            Checking
          </div>

        </div>

        <div id="edit-txn-39" style="display: none; clear: both;"></div>

        <div id="txn-38">
          <div class="cell date" title="Monday September 21, 2009">
            2009-09-29
          </div>

          <div class="cell wd">
            $123.00
          </div>

          <div class="cell deposit">
            &nbsp;
          </div>

          <div class="cell category">
            Groceries
          </div>

          <div class="cell user">
            Tim
          </div>

          <div class="cell account">
            Checking
          </div>
        </div>

        <div id="edit-txn-38" style="display: none; clear: both;"></div>

        <div id="txn-37">
          <div class="cell date" title="Monday September 21, 2009">
            2009-09-29
          </div>

          <div class="cell wd">
            $223.00
          </div>

          <div class="cell deposit">
            &nbsp;
          </div>

          <div class="cell category">
            Entertainment
          </div>

          <div class="cell user">
            Tim
          </div>

          <div class="cell account">
            Savings
          </div>

        </div>

        <div id="edit-txn-37" style="display: none; clear: both;"></div>

        <div id="txn-36">
          <div class="cell date" title="Monday September 21, 2009">
            2009-09-29
          </div>

          <div class="cell wd">
            $998.00
          </div>

          <div class="cell deposit">
            &nbsp;
          </div>

          <div class="cell category">
            Entertainment
          </div>

          <div class="cell user">
            Tim
          </div>

          <div class="cell account">
            Savings
          </div>

        </div>

        <div id="edit-txn-36" style="display: none; clear: both;"></div>

        <div id="txn-34">
          <div class="cell date" title="Monday September 21, 2009">
            2009-09-29
          </div>

          <div class="cell wd">
            $20.00
          </div>

          <div class="cell deposit">
            &nbsp;
          </div>

          <div class="cell category">
            Groceries
          </div>

          <div class="cell user">
            Tim
          </div>

          <div class="cell account">
            Checking
          </div>

        </div>

        <div id="edit-txn-34" style="display: none; clear: both;"></div>
      </div>
    </div>
  </div>
</div>

<div class="sidebar span-5 last"></div>
</div>
</body>
</html>

这是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的风格，但它在浏览器中没有改变。 / p>

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

感谢您的帮助！

Answer 1

可能是因为它的所有儿童div都是浮动的。浮动元素对其容器的高度没有贡献（我相信在IE中除外），因此在您的情况下，您的#txn-41 div的高度可能为0。

如果你添加一个“清除”div作为应解决它的最后一个孩子（如果这实际上是问题）：

<div style="clear: both"></div>

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

Here's a good article explaining the problem也显示了修复它的CSS方法（不需要额外的标记）。简而言之，将其添加到#txn-41 div：

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

（或使其成为一个班级）

我刚刚在this Sitepoint article中读到了解决问题的其他几种方法，包括仅将外部包含div声明为overflow: auto的简单方法。不知何故，这有效。

#txn-41 { overflow: auto; }

HTML DIV无法正常显示

1 个答案: