Bräuchte Unterstützung bei einem Floating-DIV-Layout

Hallo Kollegas

Hier seht ihr einen Rasterentwurf für ein Floating DIV Layout:

Ich zerbreche mir ein bisschen den Kopf darüber, wie man die Umbrüche so hinbekommt dass keine Lücken entstehen. Der HTML-Source sieht so aus:

<div class="specitem">1</div>  
<div class="specitem">2</div>  
<div class="specitem">3</div>  
<div class="specitem">4</div>  
<div class="specitem">5</div>  
<div class="specitem">6</div>  
<div class="specitem">7</div>  
<div class="specitem">8</div>  
<div class="specitem">9</div>  
<div class="specitem">10</div>  
<div class="specitem">11</div>  
<div class="specitem">12</div>  
<div class="specitem">13</div>  
<div class="specitem">14</div>  
<div class="specitem">15</div>  

Genau 15 DIVs und keins mehr. Ich bekomme also keine Unterteilung in Reihen und/oder Spalten mit rein (zumindest nicht über HTML, Javascript wollte ich dazu auch nicht ranziehen). Die DIVs werden zufallsgeneriert und als Liste ausgegeben. Absolute Positionierung kommt auch nicht wirklich in Frage. Gehe ich aber her und mache z.B. das zweite DIV größer, entstehen Lücken:

#content .specitem {
  width: 150pt;
  height: 150pt;
  margin: 0 6pt 6pt 0;
  border: 1px solid black;
  float: left;
}

#content .specitem:nth-child(2) {
  width: 308pt;
  height: 307pt;
}

Das Ergebnis sieht man hier:

Jetzt dachte ich, ok mach ich das dritte DIV größer. Nur wie bringe ich das zweite DIV dazu, UNTER das erste DIV zu floaten?

Ok, soweit mein Anliegen. Ich hoffe ich konnte es halbwegs verständlich rüber bringen

Danke und Grüße
Cody

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 311194

Url: https://administrator.de/forum/braeuchte-unterstuetzung-bei-einem-floating-div-layout-311194.html

Ausgedruckt am: 10.04.2025 um 10:04 Uhr

11 Kommentare

Neuester Kommentar

Hi,

gar nicht. Wir haben hier gerade für ein Monitoring-Portal die entsprechende Logik in Javascript gebaut. Die Darstellung erfolgt über absolute Positionierung.

Gruß,
André

Moin,

meine Kenntnisse in dem Bereich sind nicht besonders groß - aber soweit ich das überblicke kommst du um weitere "Hilf-Divs" nicht herum.
An irgendetwas müssen sich die Divs ja ausrichten.

Gruß Krämer

Hi,
you should wrap the small divs into a div which has the height of the biggest one and the width of the small ones, so that two of them fit into it.

Regards

I understand the OP wants to avoid additional DOM elements.

Zitat von @atze187:
I understand the OP wants to avoid additional DOM elements.

If he wants no absolute positioning and no javascript(no idea why?) his only choice is to change the dom.

Agree. Script plus absolute positioning is my choice.

He has to make his as well

Zitat von @atze187:
Agree. Script plus absolute positioning is my choice.

Meiner bescheidenden Meinung nach die schlechtere Lösung.

Gruß Krämer

Okay

Hallo Cody,
auch wenn du JavaScript nicht verwenden willst, damit geht das einfach und elegant mit einer einzigen Bibliothek und einem Tag für das umgebende DIV. Für dein Beispiel habe ich dir mal ein passendes Template gebaut: https://jsfiddle.net/zdvsnyrf/3/

Die nötige Bibliothek dafür gibt es z.B. von Masonry

<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Dynamic grid float</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.0/masonry.pkgd.min.js"></script>  
<style type="text/css">  
.grid{width:auto}
.specitem {
	width: 150px;
	height: 150px;
	background-color:#CCC;
	margin:5px;
	font-family: "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;  
	text-align:center;
	line-height: 150px;
	font-size: 4em;
	font-weight:bold;
	color:#DADADA;
}
.specitem:nth-child(2) {
	width: 310px;
	height: 310px;
	line-height:310px
}
</style>
<body>
<div class="grid" data-masonry='{"itemselector":".specitem","columnWidth":160,"transitionDuration":"0.4s"}'>  
    <div class="specitem">1</div>  
    <div class="specitem">2</div>  
    <div class="specitem">3</div>  
    <div class="specitem">4</div>  
    <div class="specitem">5</div>  
    <div class="specitem">6</div>  
    <div class="specitem">7</div>  
    <div class="specitem">8</div>  
    <div class="specitem">9</div>  
    <div class="specitem">10</div>  
    <div class="specitem">11</div>  
    <div class="specitem">12</div>  
    <div class="specitem">13</div>  
    <div class="specitem">14</div>  
    <div class="specitem">15</div>  
</div>
</body>
</html>

Grüße Uwe

Hallo Uwe,

da hast du dir ja richtig viel Mühe gemacht! Ich hatte derweil schon mal ein Layout mit absoluter Positionierung umgesetzt, damit ich was vorzeigbares für die Diskussion im Team habe. Das ist aber erstmal nur ein Mockup, weil ich von absoluter Positionierung im Zusammenhang mit responsiven Designs nicht viel halte. Man schafft sich mehr Ärger als Nutzen. Masonry kannte ich noch gar nicht, das werde ich mir mal anschauen. Sieht auf den ersten Blick sehr vielversprechend aus.

Der Grund warum ich Änderungen am HTML vermeiden möchte hat ein bisschen was mit Aluhüten zu tun

Die Abteilung SEO ist nämlich nicht davon abzubringen, dass geschachtelte DIVs unterschiedliche Wertungen bei den SuMas bewirken. Da dieses Layout auf der Startseite zum Einsatz kommen soll, kann man die SEOs nicht einfach vom Tisch wischen. Obs nun gerechtfertigt ist oder nicht ^^

Grüße
Cody