Implementieren von Spalten in HTML/CSS

Question

Ich habe eine Reihe von DIVs, die Textinformationen enthalten. Sie haben alle die gleiche Breite (vielleicht 400px oder so), aber unterschiedliche Höhen. Aus Platzgründen möchte ich zwei oder drei Spalten dieser DIVs haben (so etwas wie eine Suchanzeige in einer Zeitung). Sehen Sie attraktive ascii-Kunst unten :)

DIV1  DIV3 
DIV1  DIV3 
DIV1  
DIV1  DIV4 
DIV1  DIV4 
DIV1  DIV4 
      DIV4 
DIV2  DIV4 
DIV2 

Die DIVs sind javascript-driven und ändern Höhe beim Laden der Seite. Ich sollte auch nicht ihre Reihenfolge ändern (jeder DIV hat einen Titel, und sie sind alphabetisch sortiert).

Bis jetzt habe ich keinen guten Weg gefunden, es zu tun. HTML-Flow ist von links nach rechts, dann von oben nach unten, aber ich brauche von oben nach unten, dann von links nach rechts.

Ich habe versucht, eine naive Implementierung einer Tabelle mit zwei Spalten, und die DIVs in einer Spalte, und die andere Hälfte in der anderen Spalte. Haben Sie die Zeit, die es vernünftig aussieht (wenn die durchschnittliche Höhe der DIVs in jeder Spalte nahe kommt), sieht die andere Hälfte schrecklich aus.

Ich nehme an, wenn ich ein Javascript-Guru wäre, könnte ich die DIVs messen, nachdem sie erweitert wurden, sie zusammenfassen, dann zur Laufzeit von einer Tabellenspalte zur anderen verschieben ... aber das ist jenseits meiner Fähigkeiten, und ich Ich bin mir nicht sicher, ob es überhaupt möglich ist.

Irgendwelche Vorschläge?

Dank

UPDATE:

Danke für die Kommentare. Es ist offensichtlich, dass ich die Frage schlecht gestellt habe :(

Die DIVs sind nur eine Möglichkeit, ähnliche Inhalte zu enthalten/zu gruppieren - nicht wirklich für das Layout selbst. Sie sind alle gleich breit, aber unterschiedlich Ich möchte sie einfach auf einer Seite ausspucken, und magisch :) haben sie in zwei Spalten angeordnet, wo die Höhe der beiden Spalten ist ziemlich gleich - wie Zeitungsspalten. Ich weiß nicht, wie hoch die DIVs sind, wenn ich anfange, also weiß ich nicht, in welcher Spalte ich jeden DIV platziere (das heißt, wenn ich ihre Höhen kenne, würde ich sie in zwei Tabellenzellen aufteilen, aber ich weiß nicht, t weiß). Das obige Beispiel ist also nur ein einfaches Beispiel - es könnte zur Laufzeit herauskommen, dass DIV 1 größer ist als die anderen 3 kombiniert (in diesem Fall sollte DIV2 an die Spitze von Spalte 2 schweben), oder vielleicht stellt sich DIV 4 heraus die großen

Grundsätzlich (in diesem Fall DIVs 1, 2 und 3 in column1 alle sein würden, und DIV4 könnten allein in column2 sein) ich habe gehofft, dass es eine Möglichkeit, zwei Spalten und haben den Inhalt magisch zu erstellen war Fließen Sie von Spalte1 zu Spalte2 nach Bedarf (wie Word). Ich vermute, dass dies nicht möglich ist, aber mein HTML/CSS-Wissen ist ziemlich einfach, also vielleicht ...?

Answer 1

Der Entwurf CSS3 multi-column model macht was Sie wollen. Firefox scheint -moz versions of some of the properties und Safari/Chrome -webkit versions zu unterstützen; Ich weiß nichts über IE8 oder Opera.

Answer 2

Verwenden Schwimmer, etwa so:

<style> 
.col1{ 
width: 400px; 
height: 100px; 
float: left; 
} 
.col2{ 
width: 400px; 
height: 150px; 
float: left; 
} 
.col3{ 
width: 400px; 
height: 200px; 
float: left; 
} 
</style> 
<div style="width: 1200px;"> 
    <div class="col1">div1</div> 
    <div class="col2">div2</div> 
    <div class="col3">div3</div> 
    <div class="col1">div1</div> 
    <div class="col2">div2</div> 
    <div class="col3">div3</div> 
    <div class="col1">div1</div> 
    <div class="col2">div2</div> 
    <div class="col3">div3</div> 
</div> 

Answer 3

Sie div1 und div2 in einem Wrapper div wickeln konnte, und div 3 und div 4 in einem Wrapper div, dann diese beiden in einer äußeren Umhüllung wickeln. Verwenden Sie etwas CSS, um die Formatierung richtig zu machen und Sie sollten gut gehen. Die html könnte wie folgt aussehen:

<div class="wrap"> 
    <div class="col"> 
    <div>div1</div> 
    <div>div2</div> 
    </div> 
    <div class="col"> 
    <div>div3</div> 
    <div>div4</div> 
    </div> 
</div> 

Dann haben einige CSS wie folgt aus:

.wrap { 
    position: relative; 
    overflow: auto; 
} 
.col { 
    float: left; 
    width: 400px; 
} 

dass das Richtige tun sollten.

Answer 4

MACHEN SIE DIESE MIT TABELLEN.

Ich fange an, Tabellen bei der Arbeit zu verwenden, und ehrlich gesagt? Diese Dinge in CSS zu tun ist ein Durcheinander und viel schwieriger zu debuggen.

Answer 5

Die DIVs sind Javascript-driven

Nun, was Sie damit meinen, zeigen uns den Code. Wenn wir sehen können, wie die DIVs von Ihrem JS erstellt werden, können wir wahrscheinlich sehen, wie man sie auf andere Weise erstellt.

Answer 6

wäre es möglich, sie in ein css-Grid wie http://960.gs/ zu integrieren?