Jak sprawić, by pusty element div zajmował miejsce

Oto mój przypadek systemu siatki 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>

To jest mój zestaw elementów div, używany jako struktura tabeli.

CSS mówi, co następuje:

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

Nie przejmuj się szwedzkimi nazwami. Chcę, aby elementy div były wyświetlane, mimo że nie mają wartości.

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

Tak więc w tym przypadku nie ma „Namn” i „Avn.Namn” w dwóch kolumnach. Jednak po uruchomieniu tego w chrome są one usuwane i nie przesuwają już innych elementów div w kolejności float:left. Więc jeśli mam kategorie w tych samych elementach div powyżej, wartości zostaną umieszczone w niewłaściwej kategorii.

działa, jeśli usuniesz pływające. http://jsbin.com/izoca/2/edit

z pływakami działa tylko wtedy, gdy zawiera jakąś zawartość, np  

Spróbuj dodać  do pustych pozycji.

Nie rozumiem, dlaczego nie używasz <table>tutaj? Zrobią tego rodzaju rzeczy automatycznie.

Nieznaczna aktualizacja odpowiedzi @ no1cobla. To ukrywa okres. To rozwiązanie działa w IE8 +.

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

Prostym rozwiązaniem dla pustych pływających elementów div jest dodanie:

• width (lub min-width)
• min-wysokość

w ten sposób możesz zachować funkcjonalność pływającą i zmusić ją do wypełnienia przestrzeni, gdy jest pusta.

Używam tej techniki w kolumnach układu strony, aby utrzymać każdą kolumnę na swoim miejscu, nawet jeśli pozostałe kolumny są puste.

Przykład:

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

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

Po prostu dodaj znak spacji o zerowej szerokości wewnątrz pseudoelementu

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

To jest jeden sposób:

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

Możesz:

o Ustaw .kundregister_grid_1na:

• width(lub width-min) z height(lub min-height)
• lub padding-top
• lub padding-bottom
• lub border-top
• lub border-bottom

o Lub użyj pseudoelementów : ::beforelub ::afterz:

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

o Lub umieścić  w pustym elemencie, ale czasami może to przynieść nieoczekiwane efekty, np. w połączeniu ztext-decoration: underline;

Dlaczego po prostu nie dodać „min-width” do swojej klasy css?

  działa, ale to nie jest w porządku. Myślę, że w min-height: 1px;

Używając inline-block, będzie zachowywał się jak obiekt wbudowany. więc nie potrzeba żadnych pływaków, aby umieścić je obok siebie w jednej linii. I rzeczywiście, jak powiedział Rito, pływaki potrzebują „ciała”, tak jak potrzebują wymiarów.

Całkowicie zgadzam się z Pekką co do używania tabel. Wszyscy, którzy budują układy przy użyciu elementów div, unikają tabel, jakby to była choroba. Ale używaj ich do danych tabelarycznych! Do tego są przeznaczone. A w twoim przypadku myślę, że ich potrzebujesz :)

ALE jeśli naprawdę naprawdę chcesz tego, czego chcesz. Istnieje sposób hakowania CSS. To samo co hack float.

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

Dodaj to i gotowe: D (Uwaga: nie działa w IE, ale można to naprawić)

Jeśli muszą być pływające, zawsze możesz ustawić minimalną wysokość na 1 piksel, aby się nie zwijały.

Tworząc niestandardowy zestaw znaczników układu, znalazłem inną odpowiedź na ten problem. Podano tutaj niestandardowy zestaw tagów i ich klas 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 }

Kluczem jest tutaj rozmiar pudełka i wypełnienie.