Höhen-variable Divs nebeneinander @ tutorials.de: Tutorials, Forum & Hilfe

campari · 03.12.11 15:55

Habe mehrere DIVs mit fester Breite und variabler Höhe. Die stehen im HTML einfach untereinander weg.
Nun sollen die in 2 Spalten aufgeteilt werden, immer ohne nennswerten Abstand anschliessend nach oben ans vorherige Element, so:

Höhen-variable Divs nebeneinander-div-pair.png

Wenn ich die left-floate zerhauts alles. Gibts irgendeine Chance das über CSS hinzubiegen, weil ans HTML komm ich nicht ran.

Starfox2007 · 04.12.11 13:41

Poste mal deinen Code oder zumindest einen Auszug davon, denn float:left sollte hier funktionieren.

campari · 04.12.11 14:08

Code css:

#wrap {width:620px;}
.box {width:300px;height:100px;border:1px solid red;margin:2px;float:left;}
.small {height:150px;}
.medium {height:200px;}
.large {height:250px;}

HTML-Code:

<div id="wrap">
	<div class="box large">#1</div>
	<div class="box small">#2</div>
	<div class="box large">#3</div>
	<div class="box">#4</div>
	<div class="box medium">#5</div>
	<div class="box large">#6</div>
	<div class="box">#7</div>
	<div class="box small">#8</div>
</div>

Habs mal hochgeladen, hier sieht man die Abstände zum oberen Div jeweils. Es wird nicht gleichmässig, ohne Abstand verteilt:
http://atomlol.at.funpic.de/extern/float.htm

exestend · 04.12.11 15:02

Wenn div 1,3,5 und 7 im Wrapper sind müssen die Float left sein und die Boxen 2,4,6 und 8 müssen ebenfalls float:left ein,damit sie sich an den anderen Boxen orientieren..dann klappts auch mit den Boxen

LG

campari · 04.12.11 15:37

Sind doch alle float:left. Versteh nicht was du meinst.
Wie gesagt, das HTML krieg ich so geliefert, da ist nix zu ändern.

Starfox2007 · 04.12.11 15:39

Code css:

#wrap {width:620px;}
.box {width:300px;height:100px;border:1px solid red;margin:2px;float:left;}
.small {height:150px; float:left;}
.medium {height:200px; float:left;}
.large {height:250px; float:left;}

Probier mal die einzelnen auch zu floaten, auch wenn du es schon Global für Box gesetzt hast.

javaDeveloper2011 · 04.12.11 15:40

Weiß nicht, ob exestend genau das meinte, aber was hältst du davon?

Starfox2007 · 04.12.11 15:48

Habs gerade probiert damit sollte es gehen:

Code css:

#wrap {width:620px;}
.box {width:300px;height:100px;border:1px solid red;margin:2px;float:left;}
.box small {height:150px;}
.box medium {height:200px;}
.box large {height:250px;}

du hast die Klassen nicht richtig angesprochen.

djheke · 04.12.11 16:40

Dies Frage wurde doch schon einmal hier > gestellt. Hier mal ein Beispiel Die Klassen und Id's kannst du dir ja alle noch umbenennen.

Wolltest du es so ?

***hela*** · 04.12.11 16:53

Zitat von campari

..., weil ans HTML komm ich nicht ran.

Hallo,
wenn das HTML unverändert bleiben soll, dann würde ich es einfach mal mit CSS3-multi-columns versuchen:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >
<head>
<style type="text/css">
	#wrap {
		width: 620px;
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
	}
	.box {
		display: inline-block;
		width: 300px;
		height: 100px;
		margin: 2px;
		border: 1px solid red;
	}
	.small {height:150px;}
	.medium {height:200px;}
	.large {height:250px;}
</style>
</head>
<body>
	<div id="wrap">
		<div class="box large">#1</div>
		<div class="box small">#2</div>
		<div class="box large">#3</div>
		<div class="box">#4</div>
		<div class="box medium">#5</div>
		<div class="box large">#6</div>
		<div class="box">#7</div>
		<div class="box small">#8</div>
	</div>
</body>
</html>

Funktioniert mit den Mozilla- und den Webkit-Browsern, für IE müsste man m.E. ein Javascript einsetzen.

fbfeix · 05.12.11 10:10

machs doch einfach so:
variabler geht es nicht:

Code css:

.left
{
float: left;
width: 620px; /*bzw. dein Wert*/
}
.right
{
float: right;
width: 620px; /*bzw. dein Wert*/
}

diese Klassen dann einfach deinen Divs zuordnen, je nachdem auf welcher Seite du sie haben willst

campari · 05.12.11 15:42

@fbfeix, so läufts auch nicht
http://jsfiddle.net/K5eqd/

Denke, dass hela leider Recht hat, und es irgendie über JS gelöst werden muss.

fbfeix · 05.12.11 15:57

und wieso machst dus nicht so?

http://jsfiddle.net/K5eqd/4/
und fügst dann in #1 deine divs ein und in #2 deine divs ein

TheBodo · 11.12.11 02:59

Das wäre meine Idee:

Code css:

div {   
  width: 60px;  
  border: #ff0000 1px solid;
  margin: 10px 10px 10px 10px;
}
 
#wrap  {  
  width: 150px;
}
 
div.left {
  float: left;  
}
 
div.right {
  margin: 10px 10px 10px 80px; 
}
 
div.small {
  height: 20px;
}
 
div.medium {
  height: 40px;
} 
 
div.large {
  height: 60px;
}

Die Höhen in den Größen-Klassen sind nur zu Demozwecken da.
Müssteste auch weglassen können.

Alles auch zu finden unter:

http://jsfiddle.net/K5eqd/31/

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

3 divs nebeneinander, links und rechts variable Breite

2 DIVs nebeneinander mit verschiedenen Höhen in einem DIV

2 DIVs nebeneinander innerhalb eines Haupt-DIVs

Höhen von divs 100%

variable tabellen-zellen-höhen

E-Mail:

Abonnieren Abbestellen