Comment faire prendre de l'espace à un div vide

Voici mon cas de système de grille 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>

Ceci est mon ensemble de div, utilisé comme structure de table.

CSS dit suivant:

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

Ne vous inquiétez pas de la dénomination suédoise. Je veux que les divs s'affichent même s'ils n'ont aucune valeur.

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

De même, dans ce cas, il n'y a pas de «Namn» et «Avn.Namn» dans les deux colonnes. Cependant, lors de l'exécution de cela dans Chrome, ils sont supprimés et ne poussez plus les autres divs dans l'ordre float:left. Donc, si j'ai des catégories dans les mêmes divs ci-dessus, les valeurs seraient placées sous une mauvaise catégorie.

cela fonctionne si vous supprimez flottant. http://jsbin.com/izoca/2/edit

avec des flotteurs cela ne fonctionne que s'il y a du contenu, par exemple  

Essayez d'ajouter  aux éléments vides.

Je ne comprends pas pourquoi vous n'utilisez pas <table>ici? Ils feront ce genre de choses automatiquement.

Légère mise à jour de la réponse @ no1cobla. Cela cache la période. Cette solution fonctionne dans IE8 +.

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

Une solution simple pour les div flottants vides consiste à ajouter:

• largeur (ou largeur min)
• hauteur min

de cette façon, vous pouvez conserver la fonctionnalité flottante et la forcer à remplir l'espace lorsqu'elle est vide.

J'utilise cette technique dans les colonnes de mise en page, pour garder chaque colonne dans sa position même si les autres colonnes sont vides.

Exemple:

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

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

Ajoutez simplement un caractère d'espace de largeur nulle à l'intérieur d'un pseudo élément

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

C'est une façon:

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

Vous pouvez:

o Réglé .kundregister_grid_1sur:

• width(ou width-min) avec height(ou min-height)
• ou padding-top
• ou padding-bottom
• ou border-top
• ou border-bottom

o Ou utilisez des pseudo-éléments : ::beforeou ::afteravec:

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

o Ou mettre à l'  intérieur d'un élément vide, mais cela peut parfois apporter des effets inattendus par exemple. en combinaison avectext-decoration: underline;

Pourquoi ne pas simplement ajouter "min-width" à votre classe css?

  fonctionne mais ce n'est pas la bonne façon, je pense que le w min-height: 1px;

En utilisant le bloc en ligne, il se comportera comme un objet en ligne. donc pas de flotteurs nécessaires pour les mettre côte à côte sur une seule ligne. Et en effet, comme l'a dit Rito, les flotteurs ont besoin d'un «corps», comme ils ont besoin de dimensions.

Je suis totalement d'accord avec Pekka sur l'utilisation des tableaux. Tous ceux qui créent des mises en page à l'aide de div évitent les tables comme si c'était une maladie. Mais utilisez-les pour les données tablulaires! C'est à cela qu'ils servent. Et dans votre cas, je pense que vous en avez besoin :)

MAIS si vous voulez vraiment vraiment ce que vous voulez. Il existe un moyen de piratage css. Identique au hack float.

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

Ajoutez celui-ci et vous êtes également défini: D (Remarque: ne fonctionne pas dans IE, mais cela peut être réparé)

S'ils doivent être flottants, vous pouvez toujours simplement définir la hauteur min à 1px pour qu'ils ne se réduisent pas.

En créant un ensemble personnalisé de balises de mise en page, j'ai trouvé une autre réponse à ce problème. Vous trouverez ici l'ensemble personnalisé de balises et leurs classes 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 clé ici est le dimensionnement et le rembourrage de la boîte.