• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Kachelsachen :) Span stapeln

Dr.Bakterius2

Dr.Bakterius2

New member
Hallo liebe Gemeinde,

auf der Homepage sind rechts ein paar Kacheln, welche, wenn sich die Seitenbreite ändert, nebeneinander schieben (Zweier-, oder Dreierreihen). Das ist gut so und auch gewollt. Aber leider sind bei den untereinander stehenden Kacheln immer wieder Platz dazwischen. Wie klebe ich die untereinander stehenden Kacheln so, damit dieser Platz verschwindet? Gibt es hierfür eine Lösung mit CSS?

Ich pappe hier ein paar Bilder rein, damit man sich das Malheur ansehen kann.
Bild eins und zwei: Reihen nebeneinander, wobei zwischen den untereinander stehen den Kacheln Platz ist. Bild drei: Quellcode.







 
Quelltext als Screenshot von Nodepad... :D

Um dein Ziel zu erreichen könntest du mit columns arbeiten. Dann ist die Sortierung der Kacheln aber nicht mehr zuerst von links nach rechts, sondern zuerst von oben nach unten:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#kacheln {
	-moz-column-width: 300px;
	
}
#kacheln div{
	background-color: lightgray;
	border: 1px solid gray;
	margin: 5px;
	page-break-inside: avoid;
}
</style>
</head>
<body>
<div id="kacheln">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
<script>
Array.prototype.slice.call(document.querySelectorAll("#kacheln div")).forEach(function(div){
	div.style.height = (20 + 380 * Math.random()) + "px";
});
</script>
</body>
</html>

https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside

PS: Ich persönlich finde so Kacheln mit verschiedener Höhe, die trotzdem direkt aneinander "kleben", extrem unübersichtlich.
 
Aber soweit ich weiß, funktioniert bei flex das auch nicht, dass man zuerst von links nach rechts befüllt, aber die Elemente bei unterschiedlicher Höhe trotzdem noch aneinander "kleben".
 
Ich würde hier auch mit Columns/Tables arbeiten, ist am einfachsten.
 
Columns/Tables macht an dieser Stelle sogar sinn, verzwickt wird es halt nur wenn width & height der container unterschiedlich sind.
Pinterest benutzt auch Columns soweit ich weiß
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben