HTML DIV элемент исчезает без содержимого - PullRequest
Новая
       7

HTML DIV элемент исчезает без содержимого

8 голосов
/ 22 января 2010

Когда я создаю 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

Однако, если я изменю элемент div на class = nav без содержимого: 

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

Красное поле исчезает:

alt text

Как будто там нет div! Как я могу всегда показывать программу без содержимого?

Ответы [ 7 ]

14 голосов
/ 22 января 2010

Когда div пуст, элемент не имеет высоты. Так что на самом деле происходит то, что он там, но имеет 0 высоту.

Вы можете поместить что-то в него (например, &nbsp; или дать ему height и / или line-height. Я бы посоветовал дать другому div такой же высоты.

4 голосов
/ 22 января 2010

Поместите в него неразрывный пробел. Это то, что я делаю, когда мне нужно что-то , но не ничего. Вы также можете указать явную высоту, чтобы получить тот же результат.

1 голос
/ 29 июня 2012

Этот подход позволяет 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>
1 голос
/ 08 мая 2012

Другая причина, вызывающая это, - неправильно вложенные теги или не закрытые теги.

Убедитесь, что все теги правильно вложены и закрыты.

1 голос
/ 22 января 2010

Убедитесь, что содержит какой-то контент. обычно самый лучший. Это гарантирует, что у браузера есть что-то для отображения / рендеринга. Это также может быть причиной вашего DTD.

0 голосов
/ 22 января 2010

после добавления значения высоты также добавьте свойство отображения в класс nav, например: 

height:1em;
display:block;
0 голосов
/ 22 января 2010

Аликс,

вам нужно добавить значение высоты в класс .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>
...