Wie man ein leeres Div Platz nimmt

Dies ist mein Fall für ein 960-Rastersystem:

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

Dies ist meine Gruppe von Divs, die als Tabellenstruktur verwendet werden.

CSS sagt Folgendes:

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

Kümmere dich nicht um die schwedische Benennung. Ich möchte, dass die Divs angezeigt werden, obwohl sie keine Werte haben.

<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 diesem Fall gibt es in den beiden Spalten kein "Namn" und "Avn.Namn". Wenn Sie dies jedoch in Chrome ausführen, werden sie entfernt und drücken die anderen Divs nicht mehr in der Reihenfolge float:left. Wenn ich also oben Kategorien in denselben Divs habe, werden die Werte unter die falsche Kategorie gestellt.

Es funktioniert, wenn Sie Floating entfernen. http://jsbin.com/izoca/2/edit

Mit Floats funktioniert es nur, wenn es Inhalte gibt, z  

Versuchen Sie  , die leeren Elemente zu ergänzen.

Ich verstehe nicht, warum Sie hier kein verwenden <table>? Sie werden solche Sachen automatisch machen.

Leichtes Update auf @ no1cobla Antwort. Dies verbirgt die Periode. Diese Lösung funktioniert in IE8 +.

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

Eine einfache Lösung für leere schwebende Divs besteht darin, Folgendes hinzuzufügen:

• Breite (oder Mindestbreite)
• Mindesthöhe

Auf diese Weise können Sie die Float-Funktionalität beibehalten und erzwingen, dass sie den leeren Raum ausfüllt.

Ich verwende diese Technik in Seitenlayoutspalten, um jede Spalte an ihrer Position zu halten, auch wenn die anderen Spalten leer sind.

Beispiel:

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

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

Fügen Sie einfach ein Leerzeichen mit der Breite Null in ein Pseudoelement ein

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

Dies ist eine Möglichkeit:

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

Sie können:

o Stellen Sie ein .kundregister_grid_1:

• width(oder width-min) mit height(oder min-height)
• oder padding-top
• oder padding-bottom
• oder border-top
• oder border-bottom

o Oder verwenden Sie Pseudoelemente : ::beforeoder ::aftermit:

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

o Oder  in ein leeres Element einfügen, dies kann jedoch manchmal zu unerwarteten Effekten führen, z. in Kombination mittext-decoration: underline;

Warum nicht einfach "min-width" zu Ihrer CSS-Klasse hinzufügen?

  funktioniert aber das ist nicht richtig ich denke die w min-höhe: 1px;

Bei Verwendung des Inline-Blocks verhält es sich wie ein Inline-Objekt. Es sind also keine Schwimmer erforderlich, um sie in einer Linie nebeneinander zu bringen. Und tatsächlich, wie Rito sagte, brauchen Schwimmer einen "Körper", so wie sie Dimensionen brauchen.

Ich stimme Pekka in Bezug auf die Verwendung von Tabellen voll und ganz zu. Jeder, der Layouts mit Divs erstellt, vermeidet Tabellen, als wäre es eine Krankheit. Aber verwenden Sie sie für tabellarische Daten! Dafür sind sie da. Und in deinem Fall denke ich, dass du sie brauchst :)

ABER wenn du wirklich wirklich willst was du willst. Es gibt einen CSS-Hack-Weg. Gleich wie der Float Hack.

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

Fügen Sie dieses hinzu und Sie sind auch eingestellt: D (Hinweis: funktioniert nicht im IE, aber das kann behoben werden)

Wenn sie schweben müssen, können Sie die Mindesthöhe immer auf 1 Pixel einstellen, damit sie nicht zusammenfallen.

Beim Erstellen eines benutzerdefinierten Satzes von Layout-Tags habe ich eine andere Antwort auf dieses Problem gefunden. Hier finden Sie die benutzerdefinierten Tags und ihre CSS-Klassen.

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 }

Der Schlüssel hier ist die Box-Dimensionierung und Polsterung.