Positioner för floating div

jonny · 2013-10-15, 10:34

För att försöka förklara det jag vill åstadkomma. Jag har flera små divar i två kolumner. Jag har använt float:left för dessa.

Jag vill lägga in ett tomrum längst uppe till vänster så att den vänstra kolumnen hamnar en bit längre ner än den högra. Några förslag?

jonny · 2013-10-15, 10:49

Bifogar bild för att illusterera. Det vänstra är det jag vill åstadkomma och det högra är som det blir...

gregoff · 2013-10-15, 10:54

Känns som att du måste använda två DIV'ar, en för resp. kolumn.

jonny · 2013-10-15, 11:22

Det är det jag vill komma ifrån. Jag vill ha en snygg lösning både presentationsmässigt och kodmässigt.

allstars · 2013-10-15, 11:58

float: left på alla, margin-top: n px på det första elementet i serien?

Jahopp, nej, det gick visst inte.

coredev · 2013-10-15, 14:19

Citat:

Ursprungligen postat av jonny

Det är det jag vill komma ifrån. Jag vill ha en snygg lösning både presentationsmässigt och kodmässigt.

Ser inte att det skulle vara osnyggt att lägga en div runt varje kolumn. Tycker det kan låta rätt sårbart att köra utan det.

Vad har du för syfte att inte vilja dela in det i fasta kolumner, skall det t.ex. ommöbleras vid mindre skärmstorlek?

jonny · 2013-10-15, 14:45

Dels mobilanpassning och dels att det blir enklare och snyggare kod för att hämta och visa data, men jag kör nog på med två kolumner (en div per kolumn) till en början åtminstone.

ANttila · 2013-10-15, 17:23

HTML-kod:

<html>
<head>
	<style>
		body {
			margin: 0;
			padding: 0;
			width: 1000px;
		}
		.box {
			margin: 5%;
			height: 200px;
			width: 40%;
			float: left;
			display: block;
			position: relative;
		}
		.box:nth-child(odd) div {
			top: 75%;
		}
		.box div {
			width: 100%;
			height: 100%;
			position: absolute;
			background: blue;
		}
	</style>
</head>
<body>

	<div class="box">
		<div>
			test
		</div>
	</div>
	<div class="box">
		<div>
			test
		</div>
	</div>
	<div class="box">
		<div>
			test
		</div>
	</div>
	<div class="box">
		<div>
			test
		</div>
	</div>
	<div class="box">
		<div>
			test
		</div>
	</div>
	<div class="box">
		<div>
			test
		</div>
	</div>
	
</body>
</html>

Mitt fina hack av kod

Oscarip · 2013-10-15, 21:02

Kör en display:inline-block, font-size: 0 på parent och vertical-align: top samt margin-top på den du vill pusha ned?

Då slipper du köra wrapper runt varje kolumn eller rad.

coredev · 2013-10-20, 22:51

Citat:

Ursprungligen postat av Oscarip

Kör en display:inline-block, font-size: 0 på parent och vertical-align: top samt margin-top på den du vill pusha ned?

Då slipper du köra wrapper runt varje kolumn eller rad.

Tänk bara på att detta ofukar med IE6 http://quirksmode.org/css/css2/display.html

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Positioner för floating div