CSS: margins nur zwischen floats

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

26.05.2009 - 20:21

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>

Allerdings will ich den rechten und unteren margin eben nur zwischen den floating divs haben und nicht auch zwischen floating divs und dem Elternelement. Lässt sich das überhaupt irgendwie mit CSS lösen?

Im Endeffekt soll es im oberen Beispiel dann so aussehen:

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>

(Das Ergebnis im Browser, nicht der Code.)

Bearbeitet von Spikx am 27.05.2009, 12:36

vanHell

Tauren Marine

Registered: May 2004
Location: Hell
Posts: 1017

26.05.2009 - 22:15

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.

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

26.05.2009 - 23:18

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.

vanHell

Tauren Marine

Registered: May 2004
Location: Hell
Posts: 1017

26.05.2009 - 23:25

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

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

26.05.2009 - 23:28

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

hynk

Vereinsmitglied
like totally ambivalent

Registered: Apr 2003
Location: Linz
Posts: 11083

26.05.2009 - 23:32

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

*edit
scheint zu funktionieren

Bearbeitet von hynk am 26.05.2009, 23:34

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

26.05.2009 - 23:37

Hm, also in dem von mir geposteten Beispiel nicht.

hynk

Vereinsmitglied
like totally ambivalent

Registered: Apr 2003
Location: Linz
Posts: 11083

27.05.2009 - 00:02

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.

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

01.06.2009 - 15:13

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

vanHell

Tauren Marine

Registered: May 2004
Location: Hell
Posts: 1017

01.06.2009 - 15:22

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

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

01.06.2009 - 18:31

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.

Also in jQuery kann man mit .width() die aktuelle Breite des Elements ausgeben lassen.

Ja, mit JavaScript kann man das umständlich realisieren. Was aber sehr kontraproduktiv ist.

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

02.06.2009 - 23:09

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

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

02.06.2009 - 23:31

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.

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

03.06.2009 - 00:49

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.

Vielleicht sollte ich auch mal meine Signatur befolgen

Naja bin mal nich so:

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>

FF3.0, mit dem top/bottom margin hab ich mich jetzt nicht gespielt...

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

03.06.2009 - 00:55

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.

Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	26.05.2009 - 20:21 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> Allerdings will ich den rechten und unteren margin eben nur zwischen den floating divs haben und nicht auch zwischen floating divs und dem Elternelement. Lässt sich das überhaupt irgendwie mit CSS lösen? Im Endeffekt soll es im oberen Beispiel dann so aussehen: 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> (Das Ergebnis im Browser, nicht der Code.) Bearbeitet von Spikx am 27.05.2009, 12:36
vanHell Tauren Marine Registered: May 2004 Location: Hell Posts: 1017	26.05.2009 - 22:15 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.
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	26.05.2009 - 23:18 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.
vanHell Tauren Marine Registered: May 2004 Location: Hell Posts: 1017	26.05.2009 - 23:25 mit :nth-child gehts solange du keine variable breite hast.
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	26.05.2009 - 23:28 Jo, das schon, aber ich suche halt eine allgemeine Lösung für dieses Problem.
hynk Vereinsmitglied like totally ambivalent Registered: Apr 2003 Location: Linz Posts: 11083	26.05.2009 - 23:32 bin mir jetzt nicht sicher ob das möglich ist, aber versuch mal dem elternelement padding:-5px; edit scheint zu funktionieren Bearbeitet von hynk am 26.05.2009, 23:34*
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	26.05.2009 - 23:37 Hm, also in dem von mir geposteten Beispiel nicht.
hynk Vereinsmitglied like totally ambivalent Registered: Apr 2003 Location: Linz Posts: 11083	27.05.2009 - 00:02 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.
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	01.06.2009 - 15:13 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
vanHell Tauren Marine Registered: May 2004 Location: Hell Posts: 1017	01.06.2009 - 15:22 Wennst eine variable breite hast bringt dir auch JS nix, weil man afaik die aktuelle breite der elemente (noch) nicht auslesen kann.
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	01.06.2009 - 18:31 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. Also in jQuery kann man mit .width() die aktuelle Breite des Elements ausgeben lassen. Ja, mit JavaScript kann man das umständlich realisieren. Was aber sehr kontraproduktiv ist.
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	02.06.2009 - 23:09 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
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	02.06.2009 - 23:31 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.
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	03.06.2009 - 00:49 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. Vielleicht sollte ich auch mal meine Signatur befolgen Naja bin mal nich so: 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>` FF3.0, mit dem top/bottom margin hab ich mich jetzt nicht gespielt...
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	03.06.2009 - 00:55 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.

CSS: margins nur zwischen floats

Forum Index > Software > Coding Stuff

Spikx

vanHell

Spikx

vanHell

Spikx

hynk

Spikx

hynk

watchout

vanHell

Spikx

watchout

Spikx

watchout

Spikx