当我创建一个没有内容的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>
Run Code Online (Sandbox Code Playgroud)
我得到以下(预期)输出:
替代文字http://i49.tinypic.com/15g5ijq.png
但是,如果我div使用class = navto no content 更改元素:
<div class="nav"></div>
Run Code Online (Sandbox Code Playgroud)
红色框消失:
替代文字http://i47.tinypic.com/if9505.png
这就像那里没有div!如何让程序显示没有内容的div?
cle*_*tus 14
当div为空时,元素没有高度.所以实际发生的是它在那里,但有0高度.
你可以把东西放进去(喜欢 或给它height和/或line-height.我建议给另一个div同样的高度.