• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Div´s mit text-align:justify anordnen

J

j_jara

New member
hallo, ist es möglich und wie, divs per text-align:justify anzuordnen?

gibt es eine besere möglichkeit?



Code: 
<div class="thema_home">

  <div class="thema_home_thema" ></div>

  <div class="thema_home_thema" ></div>

  <div class="thema_home_thema" ></div>                    

</div>



hier das css:

Code: 
.thema_home{ text-align:justify;}

.thema_home_thema{ float:left; width:150px; background-color:#3366FF;}



danke
 
danke für die schnelle antwort.

ich möchte 5 div´s nebeneinander haben, und die abstände zwischen sollen so groß sein das alles insgesammt 100% breite hat.
 
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
.thema_home{
	min-width: 750px;
}
.wrapper {
	float: left; 
	min-width: 20%;
}

.thema_home_thema{
	width: 150px;
	height: 20px;
	background-color: #3366FF;
	margin: 0 auto;
}
</style>
</head>
<body>
<div class="thema_home">
	<div class="wrapper">
		<div class="thema_home_thema" ></div>
	</div>
	<div class="wrapper">
		<div class="thema_home_thema" ></div>
	</div>
	<div class="wrapper">
		<div class="thema_home_thema" ></div>
	</div>
	<div class="wrapper">
		<div class="thema_home_thema" ></div>
	</div>
	<div class="wrapper">
		<div class="thema_home_thema" ></div>
	</div>
</div>
</body>
</html>
funktioniert im FF3.5
 
hast recht, oben sind nur 3

aber das ist auch egal ob es sich um 3 oder 10 handelt. ich will sie alle nebeneinader, mit gleichen abstand dazwischen und von links bis rechts im bilschirm

also z. B. bei 3 divs:

<div 1> left 0px
<div 2> left:50% , -1/2 divbreite
<div 3> rigth 0px

eventuell ist auch der gedanke mit text-align:justify unsinn. aber wie kann ich diese divs die nebeneinander stehen automatisch über der gesamten breite anordnen lassen?
 
@kkapsner,

du hast mich verstanden! aber bei dein vorschlag ist das problem, das die linke ebene auch einen linken abstand zum rand hat. rechts das gleiche problem.

Die linke ebene soll auch am linken rand angrenzen, und die rechte ebene an den rechten rand. alle abstände zwischen den ebenen sind gleich.

so weit sind wir:
Code: 
.thema_home{ }
.thema_home_thema{  width:150px; background-color:#3366FF; margin:auto;}
.wrapper{ width:20%; float:left; text-align:center;}

                <div class="thema_home">
                	<div class="wrapper">
                	<div class="thema_home_thema" >fg
                    </div>
                    </div>
                    <div class="wrapper">
                    <div class="thema_home_thema" >sdf
                    </div>
                    </div>
                    <div class="wrapper">
                    <div class="thema_home_thema" >sd
                    </div>
                    </div>
                    <div class="wrapper">
                    <div class="thema_home_thema" >fg
                    </div>
                    </div>
                    <div class="wrapper">
                    <div class="thema_home_thema" >dfg
                    </div>
                    </div>
                    
                </div>
 
Ich habe dich auch verstanden, aber du hast mein Posting nicht gelesen. Wenn du float verwendest kannst du soviele Elemente nebeneinander anordnen wie du willlst. Bei drei hat jedes eine Breite von 33% bei fünf 20% - einfache Mathematik.
 
@ein schlauer: float hat sie doch schon verwendet.
@j_jara: Dazu fällt mir jetzt keine Lösung ein - ich glaub' es gibt da auch keine Lösung.
 
Also wenn ich alles richtig verstanden habe, dann ist das hier doch ne Lösung oder?



Schlauer, ich glaube sie will Abstände dazwischen. das bedeutet es klappt nicht so einfach nur mit float oder seh ich das falsch?

Problematik: Wenn die Breite kleiner wird als die drei divs zusammen sind, überschneiden sie sich. :)
 
j_jara schrieb:
hast recht, oben sind nur 3

aber das ist auch egal ob es sich um 3 oder 10 handelt. ich will sie alle nebeneinader, mit gleichen abstand dazwischen und von links bis rechts im bilschirm

also z. B. bei 3 divs:

<div 1> left 0px
<div 2> left:50% , -1/2 divbreite
<div 3> rigth 0px

eventuell ist auch der gedanke mit text-align:justify unsinn. aber wie kann ich diese divs die nebeneinander stehen automatisch über der gesamten breite anordnen lassen?
Zum Vergrößern anklicken....

Evtl. einfach die doppelte Menge der dargestellten Divs nehmen, also 20 anstatt 10 und denen dann ihren prozentualen Anteil an der gesamten Breite zuteilen. Bei 10 dargestellten Divs also 20 Divs mit jeweils 5% Breite. Wenn man die genaue Anzahl der Divs vorher nicht kennt, müsste man das ganze noch um ein Script ergänzen, welches den passenden prozentualen Anteil der Breite errechnet.

Beispiel: http://photoit.ph.funpic.de/test/
 
Zuletzt bearbeitet:
So ich hab' doch noch was gefunden - mit fester Divbreite und ohne überlappen. K.A. ob's auch in allen Browsern funktioniert - im FF3.5 tut's.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">.thema_home{
	margin: 0 75px;
	position: relative;
	height: 100px;
	min-width: 600px;
}
.thema_home_thema{
	width:150px;
	height: 100%;
	background-color:#3366FF;
	position: absolute;
	top: 0;
	margin: 0 -75px;
}

.thema_home_thema.first{left: 0%}
.thema_home_thema.second{left: 25%}
.thema_home_thema.third{left: 50%}
.thema_home_thema.fourth{left: 75%}
.thema_home_thema.fifth{left: 100%}
</style>
</head>
<body>

<div class="thema_home">
	<div class="thema_home_thema first">
		fg
	</div>
	<div class="thema_home_thema second">
		fg
	</div>
	<div class="thema_home_thema third">
		fg
	</div>
	<div class="thema_home_thema fourth">
		fg
	</div>
	<div class="thema_home_thema fifth">
		fg
	</div>
</div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben