[Erledigt] [CSS] Blöcke ohne Lücken anordnen

FX3 · 29.08.2011, 22:25

Hallo,

hab folgendes Problem: mehrere Blöcke (Breite und höhe sind 100px bzw. vielfaches davon) möchte ich ohne Lücke anordnen.
Dabei hab ich im Moment durch floating aber noch Lücken, die ich gerne vermeiden möchte:

Besser erklärt wahrscheinlich durch das Bild im Anhang

Geht das irgendwie mit nem Trick oder so. Wenn es sein muss verwende ich auch Javascript dafür, wenn ihr dafür ne Anleitung oder ein Plugin oder so habt.

Hab da jetzt mehrere Stunden rumprobiert aber bin auf keinen grünen Zweig gekommen.

vielen Dank

ChrisB · 29.08.2011, 22:39

Stichwort: jQuery Masonry

mermshaus · 29.08.2011, 22:39

CSS-Tricks gibt es da meines Wissens nicht. Zumindest nicht, wenn die Elemente und deren Größe „wechselnd“ ist, was ja vermutlich der Fall ist.

- http://masonry.desandro.com/

FX3 · 29.08.2011, 22:43

Hej, danke vielmals für das jQuery-Plugin!! Kannte ich bisher noch nicht. Das Teil ist ja wunderbar

eagle275 · 30.08.2011, 09:29

ansonsten musst du wohl die Abstände manuell berechnen (in PHP) und dann dynamisch als CSS-Bestandteil (margin-left und co) ausgeben

FX3 · 30.08.2011, 09:57

Zitat:

Zitat von eagle275

ansonsten musst du wohl die Abstände manuell berechnen (in PHP) und dann dynamisch als CSS-Bestandteil (margin-left und co) ausgeben

Ja das wäre meine Alternative gewesen, allerdings mit position:absolute;left:Xpx;top:Xpx;

eisenhans · 30.08.2011, 10:50

Hi,

ich arbeite in so einem Fall einfach mit verschachtelten divs,
die sowas wie eine Tabelle simulieren.

Automatismen sind damit nicht möglich, aber dein Beispiel aus dem Bild abzubilden geht so:

PHP-Code:

  <div id="first_row" style="clear:both">

  <div id="1_1" style="float:left"></div>

  <div id="1_2" style="float:left"></div>

  <div id="1_3" style="float:left"></div>

  <div id="1_4" style="float:left"></div>

</div>

<div id="second_row" style="clear:both">

  <div id="2_1" style="float:left">

    <div id="2_1_1" style="clear:both"></div>

    <div id="2_1_2" style="clear:both"></div>

  </div>

  <div id="2_2" style="float:left">

    <div id="2_2_1" style="clear:both"></div>

    <div id="2_2_2" style="clear:both"></div>

  </div>

  <div id="2_3" style="float:left"></div>

</div>

<div id="third_row" style="clear:both">

  <div id="3_1" style="float:left"></div>

  <div id="3_2" style="float:left"></div>

  <div id="3_3" style="float:left"></div>

  <div id="3_4" style="float:left"></div>

</div>

FX3 · 30.08.2011, 11:08

Eisenhans, das ist aber - naja sagen wir mal - undynamisch. Wenn ich da auch nur einen Block ändern möchte, ist das ganze Layout zerschossen und ich muss alles anpassen. Das geht dann mit nem jQuery-Plugin wesentlich leichter. Trotzdem danke, dass du dir die Zeit genommen hast, dir das Topic durchzulesen

ChrisB · 30.08.2011, 11:20

Zitat:

Zitat von eisenhans

ich arbeite in so einem Fall einfach mit verschachtelten divs,
die sowas wie eine Tabelle simulieren.

Ja, schöne DIV-Suppe - strukturell sinnvolles HTML ist aber was anderes.

fab · 30.08.2011, 11:27

Du sagst, Breite und Höhe sind in jedem Fall ein vielfaches von 100px. Die Lücke müsste dann durch das floating doch eigentlich gar nicht auftreten oder? Ich würde mal die wirkliche Breite und Höhe inspizieren, ob sie nicht durch versteckte , Rahmen o.ä. vergrößert wird.

Oder stell mal ein vereinfachtes Beispiel mit cssdesk.com online.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Wie numerisches Array mit Lücken renumerieren?	jwka61	PHP Tipps 2010	2	21.11.2010 22:21
[CSS] Firefox zeigt die Seite falsch an [CSS]	I-Spy	HTML, Usability und Barrierefreiheit	7	03.01.2006 11:51
template blöcke werden in falscher Reihenfolge angezeigt		PHP Tipps 2004	4	28.10.2004 16:42
template blöcke werden in falscher reihenfolge angezeigt!		PHP Tipps 2004	0	26.10.2004 17:39

29.08.2011, 22:25
FX3 Benutzer Registriert seit: 09.02.2011 Beiträge: 50 PHP-Kenntnisse: Anfänger	[Erledigt] [CSS] Blöcke ohne Lücken anordnen Hallo, hab folgendes Problem: mehrere Blöcke (Breite und höhe sind 100px bzw. vielfaches davon) möchte ich ohne Lücke anordnen. Dabei hab ich im Moment durch floating aber noch Lücken, die ich gerne vermeiden möchte: Besser erklärt wahrscheinlich durch das Bild im Anhang Geht das irgendwie mit nem Trick oder so. Wenn es sein muss verwende ich auch Javascript dafür, wenn ihr dafür ne Anleitung oder ein Plugin oder so habt. Hab da jetzt mehrere Stunden rumprobiert aber bin auf keinen grünen Zweig gekommen. vielen Dank Miniaturansicht angehängter Grafiken


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

29.08.2011, 22:39
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Stichwort: jQuery Masonry __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

29.08.2011, 22:39
mermshaus Erfahrener Benutzer Registriert seit: 14.06.2009 Beiträge: 1.725 PHP-Kenntnisse: Fortgeschritten	CSS-Tricks gibt es da meines Wissens nicht. Zumindest nicht, wenn die Elemente und deren Größe „wechselnd“ ist, was ja vermutlich der Fall ist. - http://masonry.desandro.com/ __________________ Blog \| Buch \| Kaloa

29.08.2011, 22:43
FX3 Benutzer Registriert seit: 09.02.2011 Beiträge: 50 PHP-Kenntnisse: Anfänger	Hej, danke vielmals für das jQuery-Plugin!! Kannte ich bisher noch nicht. Das Teil ist ja wunderbar

30.08.2011, 09:29
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	ansonsten musst du wohl die Abstände manuell berechnen (in PHP) und dann dynamisch als CSS-Bestandteil (margin-left und co) ausgeben __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

30.08.2011, 10:50
eisenhans Erfahrener Benutzer Registriert seit: 28.06.2009 Beiträge: 108 PHP-Kenntnisse: Fortgeschritten	Blocke anordnen Hi, ich arbeite in so einem Fall einfach mit verschachtelten divs, die sowas wie eine Tabelle simulieren. Automatismen sind damit nicht möglich, aber dein Beispiel aus dem Bild abzubilden geht so: PHP-Code: <div id="first_row" style="clear:both"> <div id="1_1" style="float:left"></div> <div id="1_2" style="float:left"></div> <div id="1_3" style="float:left"></div> <div id="1_4" style="float:left"></div> </div> <div id="second_row" style="clear:both"> <div id="2_1" style="float:left"> <div id="2_1_1" style="clear:both"></div> <div id="2_1_2" style="clear:both"></div> </div> <div id="2_2" style="float:left"> <div id="2_2_1" style="clear:both"></div> <div id="2_2_2" style="clear:both"></div> </div> <div id="2_3" style="float:left"></div> </div> <div id="third_row" style="clear:both"> <div id="3_1" style="float:left"></div> <div id="3_2" style="float:left"></div> <div id="3_3" style="float:left"></div> <div id="3_4" style="float:left"></div> </div> __________________ Webstammtisch Oldenburg

30.08.2011, 11:08
FX3 Benutzer Registriert seit: 09.02.2011 Beiträge: 50 PHP-Kenntnisse: Anfänger	Eisenhans, das ist aber - naja sagen wir mal - undynamisch. Wenn ich da auch nur einen Block ändern möchte, ist das ganze Layout zerschossen und ich muss alles anpassen. Das geht dann mit nem jQuery-Plugin wesentlich leichter. Trotzdem danke, dass du dir die Zeit genommen hast, dir das Topic durchzulesen

30.08.2011, 11:27
fab Erfahrener Benutzer Registriert seit: 28.07.2010 Beiträge: 2.308 PHP-Kenntnisse: Fortgeschritten	Du sagst, Breite und Höhe sind in jedem Fall ein vielfaches von 100px. Die Lücke müsste dann durch das floating doch eigentlich gar nicht auftreten oder? Ich würde mal die wirkliche Breite und Höhe inspizieren, ob sie nicht durch versteckte , Rahmen o.ä. vergrößert wird. Oder stell mal ein vereinfachtes Beispiel mit cssdesk.com online. __________________ PHP Blog + Library CSS Effects + Tools