Question

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

但是，如果我将div元素与class = nav更改为无内容：

<div class="nav"></div>

红框消失：

alt text http://i47.tinypic.com/if9505.png

就像那里没有div！如何让程序显示没有内容的div？

Answer 1

当div为空时，元素没有高度。所以实际发生的是它在那里，但有0高。

您可以在其中添加一些内容（例如 或者height和/或line-height。我建议给另一个div提供相同的高度。

Answer 2

在其中放置一个不间断的空间。这就是我在需要某事时所做的事情，但并非一无所获。您也可以给它一个明确的高度来获得相同的结果。

Answer 3

确保包含某种内容。通常是最好的。它确保至少有一些东西供浏览器显示/渲染。这也可能是您的DTD的原因。

Answer 4

调用的另一个原因是未正确嵌套的标签或未关闭的标签。

确保所有标签都已正确嵌套并关闭。

Answer 5

这种方法通过使用内联块显示使div为空。你强迫身高。

CSS：

.nav { 
    width: 26%; 
    height: 2em;
    display: inline-block; 
    float: left; 
    background-color: #FF0000; 
} 
.content { 
    width: 56%;
    height:2em;    
    display: inline-block;    
    background-color: #0000FF; 
}

HTML：

<div style="width: 600px;"> 
    <div class="nav"></div> 
    <div class="content"><p>content</p></div> 
</div>

Answer 6

阿利克斯，

您需要为类.nav

添加高度值

    <!doctype html> 
<head> 
<style> 
    .nav { 
        width: 26%; 
        height: 50px;
        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"></div> 
        <div class="content"><p>content</p></div> 
    </div> 
</body> 
</html>

Answer 7

添加高度值后，还要向nav类添加一个显示属性，如：

height:1em;
display:block;

HTML DIV元素消失，没有内容

7 个答案: