当我创建一个没有内容的
HTML div元素时,它就会消失.
当填充div时,就像这个HTML一样,它可以正常工作.
<!doctype html>
<head>
<style>
.nav {
width: 26%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
background-color: #FF0000;
}
.content {
width: 56%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
background-color: #0000FF;
}
</style>
</head>
<body>
<div style="width: 600px;">
<div class="nav"><p>nav</p></div>
<div class="content"><p>content</p></div>
</div>
</body>
</html>
我得到以下(预期)输出：
alt text http://i49.tinypic.com/15g5ijq.png
但是,如果我使用class = nav将div元素更改为无内容：
<div class="nav"></div>
红色框消失：
解决方法
当div为空时,元素没有高度.所以实际发生的是它在那里,但有0高度.
你可以把东西放进去(比如& nbsp;或给它高度和/或行高.我建议给另一个div增加相同的高度.
