HTML DIV元素消失,没有内容

Ali*_*xel 8 html css layout

当我创建一个没有内容的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高度.

你可以把东西放进去(喜欢&nbsp;或给它height和/或line-height.我建议给另一个div同样的高度.