codehunter
Jul 29, 2016
view2491
view11
0
Goto Top

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

GermanQuestionCSSDevelopment
Hallo Kollegas face-wink

Hier seht ihr einen Rasterentwurf für ein Floating DIV Layout:
image1
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:
image2
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 face-wink

Danke und Grüße
Cody
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 311194

Url: https://administrator.de/contentid/311194

Printed on: April 25, 2024 at 18:04 o'clock

11 Comments
Latest comment
Goto Top
Member: atze187
atze187 Jul 29, 2016 at 08:09:27 (UTC)
Goto Top
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é
Member: Kraemer
Kraemer Jul 29, 2016 at 09:04:08 (UTC)
Goto Top
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
Mitglied: 129813
129813 Jul 29, 2016 at 09:14:23 (UTC)
Goto Top
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
Member: atze187
atze187 Jul 29, 2016 at 09:23:02 (UTC)
Goto Top
I understand the OP wants to avoid additional DOM elements.
Mitglied: 129813
129813 Jul 29, 2016 updated at 09:28:03 (UTC)
Goto Top
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.
Member: atze187
atze187 Jul 29, 2016 updated at 09:34:01 (UTC)
Goto Top
Agree. Script plus absolute positioning is my choice.

He has to make his as well face-smile
Member: Kraemer
Kraemer Jul 29, 2016 at 09:35:37 (UTC)
Goto Top
Zitat von @atze187:
Agree. Script plus absolute positioning is my choice.
Meiner bescheidenden Meinung nach die schlechtere Lösung.

Gruß Krämer
Member: atze187
atze187 Jul 29, 2016 at 09:51:27 (UTC)
Goto Top
Okay face-smile
Member: colinardo
colinardo Jul 29, 2016 updated at 19:03:18 (UTC)
Goto Top
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
Member: Codehunter
Codehunter Aug 01, 2016 at 06:56:07 (UTC)
Goto Top
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 face-wink 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
Member: colinardo
colinardo Sep 11, 2016 at 16:17:28 (UTC)
Goto Top
Wenns das dann war, den Beitrag bitte noch auf gelöst setzen. Merci.
GermanQuestionCSSDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 5 Comments