Come fare in modo che un div vuoto occupi spazio

Questo è il mio caso del sistema di rete 960:

<div class="kundregister_grid_full">
    <div class="kundregister_grid_1">ID</div>
    <div class="kundregister_grid_1">Namn</div>
    <div class="kundregister_grid_1">Anv.Namn</div>
    <div class="kundregister_grid_1">Email</div>
    <div class="kundregister_grid_1">Roll</div>
    <div class="kundregister_grid_1">Aktiv</div>
</div>

Questo è il mio set di div, utilizzato come struttura della tabella.

CSS dice quanto segue:

.kundregister_grid_1 {
    display: inline-block;
    float: left;
    margin: 0; 
    text-align: center;
}
.kundregister_grid_1 {
    width: 140px;
}

Non importa la denominazione svedese. Voglio che i div vengano visualizzati anche se non hanno valori.

<div class="kundregister_grid_full">
 <div class="kundregister_grid_1">ID</div>
 <div class="kundregister_grid_1"></div>
 <div class="kundregister_grid_1"></div>
 <div class="kundregister_grid_1">Email</div>
 <div class="kundregister_grid_1">Roll</div>
 <div class="kundregister_grid_1">Aktiv</div>
</div>

In questo caso, in questo caso non ci sono "Namn" e "Avn.Namn" nelle due colonne. Tuttavia, quando si esegue questo in Chrome, vengono rimossi e non spingono più gli altri div nell'ordine float:left. Quindi, se ho categorie negli stessi div sopra, i valori verrebbero inseriti nella categoria sbagliata.

funziona se rimuovi il floating. http://jsbin.com/izoca/2/edit

con float funziona solo se c'è del contenuto es  

Prova ad aggiungere  agli elementi vuoti.

Non capisco perché non stai usando un <table>qui, però? Faranno questo genere di cose automaticamente.

Leggero aggiornamento alla risposta @ no1cobla. Questo nasconde il periodo. Questa soluzione funziona in IE8 +.

.class:after
{
    content: '.';
    visibility: hidden;
}

Una soluzione semplice per div con float vuoti è aggiungere:

• larghezza (o larghezza minima)
• min-height

in questo modo puoi mantenere la funzionalità float e costringerla a riempire lo spazio quando è vuota.

Uso questa tecnica nelle colonne del layout di pagina, per mantenere ogni colonna nella sua posizione anche se le altre colonne sono vuote.

Esempio:

.left-column
{
   width: 200px;
   min-height: 1px;
   float: left;
}

.right-column
{
    width: 500px;
    min-height: 1px;
    float: left;
}

Aggiungi semplicemente uno spazio di larghezza zero all'interno di uno pseudo elemento

.class:after {
    content: '\200b';
}

Questo è un modo:

.your-selector:empty::after {
    content: ".";
    visibility: hidden;
}

Puoi:

o Imposta .kundregister_grid_1su:

• width(o width-min) con height(o min-height)
• o padding-top
• o padding-bottom
• o border-top
• o border-bottom

o Oppure usa pseudo-elementi : ::beforeo ::aftercon:

• {content: "\200B";}
• o {content: "."; visibility: hidden;}.

o Oppure mettere  all'interno un elemento vuoto, ma questo a volte può portare effetti inaspettati ad es. in combinazione context-decoration: underline;

Perché non aggiungere semplicemente "min-width" alla tua classe css?

  funziona ma non è così, penso che w min-height: 1px;

Con l'utilizzo del blocco in linea si comporterà come un oggetto in linea. quindi nessun galleggiante necessario per metterli uno accanto all'altro su una riga. E infatti, come diceva Rito, i galleggianti hanno bisogno di un "corpo", come se avessero bisogno di dimensioni.

Sono totalmente d'accordo con Pekka sull'uso delle tabelle. Tutti quelli che costruiscono layout usando le tabelle di evitamento di div come se fosse una malattia. Ma usali per i dati tablolari! Ecco a cosa servono. E nel tuo caso penso che tu ne abbia bisogno :)

MA se vuoi davvero quello che vuoi. C'è un modo per hackerare CSS. Come il float hack.

.kundregister_grid_1:after {  content: ".";  }

Aggiungi quello e sei anche impostato: D (Nota: non funziona in IE, ma è risolvibile)

Se devono essere flottati, puoi sempre impostare l'altezza minima su 1px in modo che non collassino.

Costruendo un set personalizzato di tag di layout, ho trovato un'altra risposta a questo problema. Qui viene fornito il set personalizzato di tag e le loro classi CSS.

HTML

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>

   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

CSS

layout-table
{
    display : table;
    clear : both;
    table-layout : fixed;
    width : 100%;
}

layout-table:unresolved
{
    color : red;
    border: 1px blue solid;
    empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
    display : table-row;
    clear : both;   
    empty-cells : show;
    width : 100%;
}

layout-column 
{ 
    display : table-column;
    float : left;
    width : 25%;
    min-width : 25%;
    empty-cells : show;
    box-sizing: border-box;
    /* border: 1px solid white; */
    padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
    background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

La chiave qui è il dimensionamento della scatola e l'imbottitura.