Kompliziertes CSS-Layout

Question

könnte mir jemand mit dem komplizierten Kachel-Layout helfen, wie es unter the link spezifiziert wurde.

Ich habe versucht, float zu verwenden: links für Widgets, aber ich bekomme den roten Block immer unter # 2. Ich sollte Widgets zu Black Dashboard dynamisch hinzufügen können. Ich kann html5, css3 und jquery verwenden.

Es gibt nicht nur 2 Spalten. Wenn das Dashboard freien Platz für Platz 3, 4 usw. hat, sollte es da sein. Es sollte eine bis unendlich viele Widgets mit unterschiedlicher Größe geben. Wenn kein freier Breitenbereich vorhanden ist, sollten neue Widgets nach links schweben und freien Speicherplatz vollständig ausfüllen.

Failing Markup: pastie.org/593815

Zusätzliche Mockup: img191.imageshack.us/img191/2139/picture2fdi.png

Answer 1

2 Container Divs machen, beide float: left

dann einfach schweben: alles in diesen divs lassen.

einfachste Möglichkeit, ein zweispaltiges Layout mit CSS zu tun.

<div id="leftcol"> 
your code... 
</div> 
<div id="rightcol"> 
your code... 
</div> 

css:

leftcol,rightcol{float:left;width:(whatever);} 

Answer 2

Die CSS:

body { 
    background: #000; 
} 
.left { 
    float: left; 
} 
.right { 
    float: left; 
} 
.widget { 
    margin: 10px; 
    margin-right: auto; 
    margin-left: auto; 
    width: 200px; 
} 
.content { 
    margin: 10px; 
    background: #fff; 
    width: 300px; 
} 
#one { 
    height: 300px; 
} 
#two { 
    height: 400px; 
} 
#red { 
    background: #f00; 
    height: 100px; 
} 
#green { 
    background: #0f0; 
    height: 100px; 
} 
#blue { 
    background: #00f; 
    height: 100px; 
} 

Die HTML:

<div class="left"> 
    <div class="content" id="one"></div> 
    <div class="widget" id="red"></div> 
    <div class="widget" id="green"></div> 
</div> 

<div class="right"> 
    <div class="content" id="two"></div> 
    <div class="widget" id="blue"></div> 
</div> 

Answer 3

Was BlueprintCSS mit? http://www.blueprintcss.org/

Answer 4

Haben Sie versucht, nur ein Wrapper Div, klassifizieren es als etwas wie "Widget" und Floating es links? Ich bin mir nicht sicher, ob ich verstehen, was die farbigen Felder sind unter # 1 und # 2 sind, aber wenn sie auf die Elemente direkt über ihnen verwandt sind, ich sehe nicht, wie das ist schwierig:

<div class="widget"> 
    <div id="widget1">stuff</div> 
    <div id="widget1_1">stuff related to 1</div> 
</div> 

<div class="widget"> 
    <div id="widget2">stuff</div> 
    <div id="widget2_1">stuff related to 2</div> 
</div> 

CSS :

.widget {float: left; overflow: auto;} 
.widget div {float: left;} 

Answer 5

Es gibt keine CSS-Lösung für was Sie wollen. Ich glaube, ich habe gesehen, wie JS-Lösungen herumschwimmen, aber ich kann im Moment keinen ansprechen.

Answer 6

Ich weiß, das ist wahrscheinlich zu spät. Aber ich habe kürzlich dieses JQuery-Plugin gefunden, das das Problem sehr elegant zu lösen scheint.

isotope.metafizzy.co

Ich hoffe, das hilft.