Elemento DIV HTML Scompare senza contenuto

Quando creo un elemento div HTML senza contenuto, scompare.Elemento DIV HTML Scompare senza contenuto

Quando il div è compilato, come questo HTML, funziona correttamente.

<!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>

ottengo il seguente (atteso) di uscita:

alt text http://i49.tinypic.com/15g5ijq.png

Tuttavia, se cambio l'elemento div con la class = nav a nessun contenuto:

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

La scatola rossa scompare:

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

È come se non ci fosse alcun div! Come faccio ad avere sempre il programma per mostrare il div senza contenuti?

fonte

2010-01-22 Alix Axel

Quando il div è vuoto, l'elemento non ha altezza. Quindi, quello che sta realmente accadendo è che è lì ma ha altezza 0.

Si potrebbe mettere qualcosa in esso (come   o dare height e/o line-height. Io suggerirei dando l'altro div alla stessa altezza.

fonte

2010-01-22 03:01:04 cletus

Grazie, CSS può essere una valle di lacrime (ogni | alcuni) volte. Sono andato con l'approccio ' '. –

Mettere uno spazio unificatore in esso. Questo è quello che fare quando ho bisogno di qualcosa, ma non nulla. si può anche essere in grado di dare un altezza esplicita per ottenere lo stesso risultato.

fonte

2010-01-22 03:01:51 Sampson

assicurarsi che la contiene un qualche tipo di contenuti. solito è la migliore. garantisce che ci sia almeno qualcosa da mostrare/rendere visibile al browser, anche questo potrebbe essere una causa del DTD.

fonte

2010-01-22 03:03:06

Alix,

è necessario aggiungere un valore di altezza alla classe .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>

fonte

2010-01-22 03:12:10 PantsOffNow

Nome visualizzato dolce. – jay

dopo aver aggiunto un valore di altezza anche aggiungere una proprietà di visualizzazione per la classe nav come:

height:1em; 
display:block;

fonte

2010-01-22 03:21:56 rob

Un'altra cosa chiamata perché è tag o tag non nidificati in modo errato che non sono chiusi.

Assicurarsi che tutti i tag siano nidificati e chiusi correttamente.

fonte

2012-05-08 18:50:29

Questo approccio consente al div di essere vuoto, utilizzando la visualizzazione di blocco in linea. Forzi l'altezza.

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>

fonte

2012-06-28 20:48:11 DefyGravity

jsfiddle - http://jsfiddle.net/dfygrvty/M9Xna/ – DefyGravity

Elemento DIV HTML Scompare senza contenuto

risposta

Problemi correlati