it-swarm.com.de

Layout-Spalten - Gleiche Höhe

Ich erinnere mich, dass ich als erstes angefangen habe, Tabellen für Layouts zu verwenden, und gelernt habe, dass ich das nicht tun sollte. Ich arbeite an einer neuen Site und kann anscheinend keine Spalten gleicher Höhe erstellen, ohne Tabellen zu verwenden. Hier ist ein Beispiel für den Versuch mit div-Tags.

<div class="row">
<div class="column">column1</div>
<div class="column">column2</div>
<div class="column">column3</div>
<div style="clear:both"></div>
</div>

Jetzt habe ich versucht, Spalten nach links zu verschieben und ihre Breite auf 33% zu setzen, was in Ordnung ist. Ich verwende die Option clear: both div, damit die Zeile die Größe der größten Spalte hat, aber die Spalten unterschiedliche Größen haben basierend darauf, wie viel Inhalt sie haben. Ich habe viele Korrekturen gefunden, die hauptsächlich CSS-Hacks betreffen und es einfach so aussehen lassen, als wäre es richtig, aber das ist nicht das, was ich will. Ich dachte nur daran, es in Javascript zu machen, aber dann würde es für diejenigen, die sich entscheiden, ihr Javascript zu deaktivieren, anders aussehen. Der einzig wahre Weg, dies zu tun, ist die Verwendung von Tabellen, da die Zellen alle die gleiche Höhe in derselben Zeile haben. Aber ich weiß, dass es schlecht ist, Tabellen zu benutzen. Nachdem ich für immer gesucht hatte, stieß ich auf Folgendes: http://intangiblestyle.com/lab/equal-height-columns-with-css/ Was es zu tun scheint, ist genau dasselbe wie Tabellen, da es nur so ist Einstellen seiner Anzeige genau wie Tabellen. Wäre das genauso schlecht wie das Verwenden von Tabellen? Ich kann ehrlich gesagt nichts anderes finden, was ich tun könnte.

edit

@Su 'Ich habe in "Faux Columns" gesucht und glaube nicht, dass das das ist, was ich will. Ich denke, ich könnte mithilfe der display: table-Methode bessere Designs für meine Website implementieren. Ich habe diese Frage gestellt, weil ich mir nicht sicher war, ob ich das tun sollte, da ich immer gehört habe, dass es schlecht ist, Tabellen in Website-Layouts zu verwenden.

2
Kyle

Nein, die Verwendung von display: table, display: table-row und display: table-cell wäre nicht so schlecht wie die Verwendung von <table> -Tags. Der Grund dafür ist, dass HTML eine semantische Sprache ist, was bedeutet, dass die verwendeten Tags den Inhalt beschreiben sollten, der darin enthalten ist. In diesem Fall kann CSS verwendet werden, um dem Browser zu beschreiben, wie die Daten dargestellt werden sollen, und da die Funktionalität der gewünschten Darstellung die einer Tabelle ist, können Sie dies direkt tun.

Ich werde jedoch erwähnen, dass sie werden in IE7 oder niedriger nicht unterstützt .

P.S. Sie könnten auch Auschecken einige ähnliche Fragen zum Stapelüberlauf.

3
Nightfirecat

Ich schlage vor, Sie versuchen, bei einer Medienabfrage die folgenden Spalten zu verwenden, um zu vermeiden, dass auf schmalen Bildschirmen Spalten angezeigt werden, wenn diese nicht ordnungsgemäß funktionieren. Es ist für Chrome und Safari (-webkit) sowie für Firefox (-moz) codiert. Sie können die Spaltenanzahl und die Spaltenlücke Ihren Anforderungen entsprechend ändern. Ich finde es ziemlich zuverlässig.

@media only screen and ( min-width: 1200px ) { 
  .two-col {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
      -webkit-column-gap: 1.5rem;
         -moz-column-gap: 1.5rem;
              column-gap: 1.5rem
  }
}

Ein weiterer Punkt. Wenn die Spalten oben ausgerichtet werden sollen, unabhängig davon, ob eine mit 12 Zeilen und die andere mit 11 Zeilen endet, können Sie beispielsweise auch vertical-align: top hinzufügen.

1