DIV zweispaltig und gleichlang

[Alexanderk]

Hallo,

ich suche schon seit 2 Tagen, nach einer Möglichkeit folgendes Problem zu lösen.

Es geht darum, variable Daten hübsch in Divboxen auszugeben. Diese sollen zweispaltig sein, um Platz zu sparen.

Ich habe ein Beispielbild erstellt.
http://supergrillen.su.funpic.de/cssdiv.gif

Von mir aus können die Boxen abwechseln links - rechts eingefügt werden. Ab besten natürlich, wenn es je nach Bedarf und länge sortiert wird, ob links länger ist, oder rechts.
Durch blöden Zufall könnte es ja sein, dass jeder 2. Datensatz 3mal so lang ist. Dann habe ich ne lange linke Spalte, und ne kurze Rechte.

Ziel ist es jetzt aber eher hauptsählich links und rechts die Spalten zu haben.
Der Abstand nach Oben zu dem überliegenden Div sollte bei 10px liegen.


Ich hoffe, einige Nutzer machen sich die Mühe und können mir da vielleicht weiterhelfen. Dafür schon mal vielen Danke

 

[Enumerator]

Moin!

Du solltest die <div> Container einfach "floatend" darstellen und ihnen eine Breite - realtiv zum Parent-Container - von knappen 50% zuweisen.

HMTL Beispiel:

<div class="parent">

<div class="content">Addo ymo xiphias Heidelberg Lactuca, nex in congruens, ruo lego os cum universitas. </div>

<div class="content">Sal Sanctus levo Rectum per vexamen et Reseco sino sed lea do for Esse identidem repromitto cur et Perpetior, stipo incrementabiliter, cervus ante hilaris, mire algor se Vena thorax frendo puto Magnopere ops tam prenda contineo.</div>

<div class="content">Hoc pestilencia tum byssus digredior. Per Caetera deduco gero pertinaciter. </div>

<div class="content">Nam constat Lues huic eia qua vox ara proh ille se Ymber clango. Sive furca Proicio St extrudo.</div>

<div class="content">Dis Cubiculum quo scitus Litigo diripio ango quies pes res penitentia Tabula, vos diu Sordes vae Epulor ile Tenor, nox Opulentia diu, ago Suppono sto pia Erilis, hae Virgo iam ora.</div>

<div class="content">Si subo Accubo castimonia hic ibi qua lux sto eu Pulcher Sem.</div>

</div>

CSS-Part:

div.parent div.content
{
   margin-right: 1em;
   margin-left:   1em;
   float: left;
   width: 45%;
}

Warum nicht 50%? Aufgrund des Box-Modells. Die Abstände (margin) müssen in Sachen verfügbarer Platz schließlich mitberechnet werden.
Mit obigem Beispiel erhältst Du dieses Ergebnis:

1. 2.
3. 4.
5. 6. usw...

Allerdings solltest Du beachten, dass z.B. Nr. 3 nicht genau an Nr. 1 anschließt, wenn Nr. 2 doppelt so lang ist wie Nr. 1 ...

Doch als Denkansatz ist das wohl mehr als genug.

Gruß
Enum

 

[Gumbo]

Mit folgender JavaScript-Funktion kommst du deinem Traum ein Stückchen näher:

function compactFloatingListElements( obj )
{
	var fontSizeTestElement = document.createElement("div");
	fontSizeTestElement.style.width = "1em";
	obj.appendChild(fontSizeTestElement);
	var fontSize = fontSizeTestElement.offsetWidth;
	obj.removeChild(fontSizeTestElement);
	var li = obj.getElementsByTagName("li");
	var columnOffsets = new Array();
	var columnHeightSum = new Object();
	var tmp = 0;

	for( var i=0; i<li.length; i++ ) {
		var firstColumnItem = false;
		var columnOffsetLeft = li[i].offsetLeft;
		if( tmp < columnOffsetLeft ) {
			columnOffsets.push(columnOffsetLeft);
			firstColumnItem = true;
			tmp = columnOffsetLeft;
		}
		if( firstColumnItem ) {
			columnHeightSum[columnOffsetLeft] = li[i].offsetHeight;
			continue;
		}
		var newMarginTop = columnHeightSum[columnOffsetLeft] - columnHeightSum[columnOffsets[i%(columnOffsets.length-1)+1]];
		columnHeightSum[columnOffsetLeft] += li[i].offsetHeight;
		if( newMarginTop != 0 ) {
			li[i].style.marginTop = (newMarginTop/fontSize) + "em";			
		}
	}
}

Dazu muss die Liste allerdings eine feste Breite haben. EIn Beispiel:

<ul id="foobar">
	<li>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
	<li>2 Addo ymo xiphias Heidelberg Lactuca, nex in congruens, ruo lego os cum universitas.</li>
	<li>3 Sal Sanctus levo Rectum per vexamen et Reseco sino sed lea do for Esse identidem repromitto cur et Perpetior, stipo incrementabiliter, cervus ante hilaris, mire algor se Vena thorax frendo puto Magnopere ops tam prenda contineo.</li>
	<li>4 Hoc pestilencia tum byssus digredior. Per Caetera deduco gero pertinaciter.</li>
	<li>5 Nam constat Lues huic eia qua vox ara proh ille se Ymber clango. Sive furca Proicio St extrudo.</li>
	<li>6 Dis Cubiculum quo scitus Litigo diripio ango quies pes res penitentia Tabula, vos diu Sordes vae Epulor ile Tenor, nox Opulentia diu, ago Suppono sto pia Erilis, hae Virgo iam ora.</li>
	<li>7 Si subo Accubo castimonia hic ibi qua lux sto eu Pulcher Sem.</li>
</ul>

ul {
	list-style: none;
	padding: 0;
	width: 50em;
}
ul li {
	padding: 0.5em 0.5em;
	float: left;
	width: 24em;
}

window.onload = function() {
	compactFloatingListElements(document.getElementById("foobar"));
}