我认为这是一种相当简单的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">
</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">
</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">
</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">
</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">
</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">
</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">
</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不可见？它的内容是可见的，但我似乎无法对父母施加效果！
感谢您的帮助！
答案 0 :(得分：6)
可能是因为它的所有儿童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; }