CSS: margins nur zwischen floats

Seite 1 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css_margins_nur_zwischen_floats_207618/page_1 - zur Vollversion wechseln!

Angenommen ich will in einem div, egal ob fixe breite oder nicht, beliebig viele floating divs einfügen. Zwischen diesen divs soll sich aber auch ein Abstand befinden. zB so:

Code: PHP

<div style="border:2px solid black; width:190px;">
	<div style="background:#808080; width:60px; height:60px; margin:0px 5px 5px 0px; float:left;"></div>
	<div style="background:#808080; width:60px; height:60px; margin:0px 5px 5px 0px; float:left;"></div>
	<div style="background:#808080; width:60px; height:60px; margin:0px 5px 5px 0px; float:left;"></div>
	<div style="background:#808080; width:60px; height:60px; margin:0px 5px 5px 0px; float:left;"></div>
	<div style="background:#808080; width:60px; height:60px; margin:0px 5px 5px 0px; float:left;"></div>
	<div style="background:#808080; width:60px; height:60px; margin:0px 5px 5px 0px; float:left;"></div>
	<div style="clear:both;"></div>
</div>

Code: PHP

<div style="border:2px solid black; width:190px;">
	<div style="background:#808080; width:60px; height:60px; margin:0px 5px 5px 0px; float:left;"></div>
	<div style="background:#808080; width:60px; height:60px; margin:0px 5px 5px 0px; float:left;"></div>
	<div style="background:#808080; width:60px; height:60px; margin:0px 0px 5px 0px; float:left;"></div>
	<div style="background:#808080; width:60px; height:60px; margin:0px 5px 0px 0px; float:left;"></div>
	<div style="background:#808080; width:60px; height:60px; margin:0px 5px 0px 0px; float:left;"></div>
	<div style="background:#808080; width:60px; height:60px; margin:0px 0px 0px 0px; float:left;"></div>
	<div style="clear:both;"></div>
</div>

Mit den CSS 3 Selectors :first-child :last-child :nth-child sollte das ansich gehn, nur browser werden es noch nicht alle umsetzen können.

Nein, selbst das nützt hier ja nichts, weil ja nicht nur das first-child oder last-child einen anderen margin braucht. Bei variabler Breite des parent elements könnten das irgendwelche der children sein.

mit :nth-child gehts solange du keine variable breite hast.

Jo, das schon, aber ich suche halt eine allgemeine Lösung für dieses Problem.

bin mir jetzt nicht sicher ob das möglich ist, aber versuch mal dem elternelement padding:-5px;

*edit
scheint zu funktionieren

Hm, also in dem von mir geposteten Beispiel nicht.

sieht so aus als wärs nur im dreamweaver gegangen. im browser funktionierts wirklich nicht.
was ich so lese ist es auch nicht erlaubt und wird ignoriert.

Mit reinem CSS nicht, wenn du Javascript dazunimmst müsste es gehen indem du dem letzten Element einer Zeile dann eine andere CSS class/style gibst

Wennst eine variable breite hast bringt dir auch JS nix, weil man afaik die aktuelle breite der elemente (noch) nicht auslesen kann.

Zitat von vanHell

Wennst eine variable breite hast bringt dir auch JS nix, weil man afaik die aktuelle breite der elemente (noch) nicht auslesen kann.

Oh, untested, aber so könnte es gehen:

Mach keine block-level elements sondern inline daraus, damit müsstest du genau das Verhalten was du willst bekommen - margins zwischen den Elementen aber nicht zum parent, vertikaler margin sollte durch line-height zu bezwingen sein - kein float natürlich...

100% sicher bin ich mir nicht, aber probieren kanst ja mal

Nein, das geht leider auch nicht, aus mehreren Gründen:

• Einem inline Element kann man keine Breite und Höhe geben.
• Stattdessen in ein inline div ein normales div mit width und height zu geben funktioniert auch nicht.
• In dem inline div könnten sich dann also nur weitere inline Elemente befinden.
• Zeilenumbrüche zwischen inline Elementen resultieren in spaces zwischen den Elementen.

Zitat von Spikx

Nein, das geht leider auch nicht, aus mehreren Gründen:

• Einem inline Element kann man keine Breite und Höhe geben.
• Stattdessen in ein inline div ein normales div mit width und height zu geben funktioniert auch nicht.
• In dem inline div könnten sich dann also nur weitere inline Elemente befinden.
• Zeilenumbrüche zwischen inline Elementen resultieren in spaces zwischen den Elementen.

Code:

<html>
	<head>
		<style type="text/css">
div {
	border:1px solid red;
}
.a {
	display:inline-block;
	margin-right: 5px;
	min-width: 100px;
}
.b {
	width:300px;
}
.c {
	padding:0;
}
		</style>
	</head>
	<body>
		<div class="c">
			<div class="a"><div class="b">asdf</div></div>
			<div class="a"><div class="b">asdf</div></div>
			<div class="a"><div class="b">asdf</div></div>
			<div class="a"><div class="b">asdf</div></div>
		</div>
	</body>
</html>

Ah, inline-block, ja das sieht besser aus. Leider ist inline-block CSS 2.1 und natürlich wieder gar nicht für den IE geeignet, zumindest nicht für IE <= 7. Pfft.

overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2026