Comment faire une div vide prendre de l'espace

Question

C'est mon 960 système de grille de cas:

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

C'est mon jeu de vrd, utilisé comme une structure de table.

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

Dont l'esprit suédois de nommage. Je veux que les divs de montrer, même si elles n'ont pas de valeurs.

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

Comme si, dans ce cas il n'y a pas de "Namn' et 'Avn.Namn' dans les deux colonnes. Cependant lors de l'exécution de cette dans chrome, ils sont supprimés, et ne plus pousser les autres divs dans l'ordre float:left. Donc, si j'ai des catégories dans la même divs ci-dessus, les valeurs seraient placés sous la mauvaise catégorie.

Merci /Marcus

Answer 1

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

avec des flotteurs, cela ne fonctionne que s’il ya du contenu, par exemple  

Answer 2

Essayez d'ajouter   aux éléments vides.

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

Answer 3

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

Answer 4

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

Answer 5

Avec l'aide de l'inline-block, il va se comporter comme un objet en ligne. donc pas de flotte nécessaire pour les obtenir à côté de l'autre sur une seule ligne. Et, en effet, que Rito dit, les flotteurs ont besoin d'un "corps", comme ils ont besoin d'dimensions.

Je suis totalement d'accord avec Pekka sur l'utilisation de tables. Tout le monde que construire des mises en page à l'aide de div éviter des tables comme c'est une maladie. Mais les utiliser pour tablular de données! Qu'est ce qu'ils vont ment pour. Et dans votre cas, je pense que vous en avez besoin :)

MAIS si vous voulez vraiment ce que vous voulez. Il y a un css hack façon. Même que le flotteur hack.

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

Ajouter et vous êtes également en jeu :D (Note: ne fonctionne pas sous IE, mais c'est réparable)