Fatal编程技术网
  • jquery/
  • Jquery HTML div未正确显示

Jquery HTML div未正确显示

jquery html css

Jquery HTML div未正确显示,jquery,html,css,Jquery,Html,Css,我有一个我认为相当简单的HTML格式来显示一些财务信息。出于某种原因，jQuery（实际上还有Firebug！）似乎没有更新父div的可视显示。如果您在浏览器中查看这一点，就会更容易看到 我正在使用这个框架 以下是HTML： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http

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

我正在使用这个框架

以下是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>
如果您在Firebug（或Safari的inspect元素）中看到这一点，您将看到jQuery调用实际上正在更改#txn-41 div的样式，但在浏览器中没有更改

为什么txn-41 div不可见？它的内容是可见的，但我似乎无法将效果应用于父对象

谢谢你的帮助

这可能是因为它的所有子div都是浮动的。浮动元素不会影响其容器的高度（我相信IE除外），因此在您的情况下，
#txn-41
div的高度可能为0

如果您添加一个“clearing”div作为应该解决它的最后一个子项（如果这确实是问题的话）：

（或者让它成为一门课）

我刚刚读到了关于解决这个问题的其他几种方法，包括一种非常简单的方法，即仅将外部包含的div声明为具有
溢出：auto
。不知何故，这是可行的

#txn-41 { overflow: auto; }
这可能是因为它的所有子div都是浮动的。浮动元素不会影响其容器的高度（我相信IE除外），因此在您的情况下，
#txn-41
div的高度可能为0

如果您添加一个“clearing”div作为应该解决它的最后一个子项（如果这确实是问题的话）：

（或者让它成为一门课）

我刚刚读到了关于解决这个问题的其他几种方法，包括一种非常简单的方法，即仅将外部包含的div声明为具有
溢出：auto
。不知何故，这是可行的

#txn-41 { overflow: auto; }
太棒了，谢谢！在那之后，虽然溢出来的水没有溢出来。太棒了，谢谢！之后：虽然溢出没有发生，但还是发生了。 
#txn-41:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#txn-41 { overflow: auto; }