CSS - DIV's gelichmässig verteilen

[MisterG]

Moin,

Ich würde gerne DIV's gleichmässig auf einer Zeile verteilen. Jetzt mit diesem Code (siehe unten) sind alle gleich hintereinander gereiht. Es sollte auch noch funktionieren wenn es 4 DIV's der Klasse "Text" gibt.

Es hat Ähnlichkeiten mit Blocksatz, leider funktioniert es nicht mit text-align: justify;

CSS:

#Container
{
   float: left;
   width: 600px;
   border: 1px solid black;
}
.Text
{
   float: left;
   border: 1px solid black;
}

HTML:

<DIV id="Container">
   <DIV class="Text">Text1</DIV>
   <DIV class="Text">Text2</DIV>
   <DIV class="Text">Text3</DIV>
</DIV>

Hat jemand von euch eine Idee, wie man das machen könnte?

Gruss,
MisterG

 

[mschoening]

Hi,
guckst du hier: http://intensivstation.ch/files/templates/temp04.html

...und wenn da nichts dabei ist: http://intensivstation.ch/templates/

 

[floeschen]

Definiere bei .text auch noch display: inline;

 

[mschoening]

Mein Link war nicht das was du suchst. Du willst ja beliebig viele DIV's dran hängen können...

 

[Peter Maurer]

Das ist uebrigens genau die Stelle, an der ich bisher immer wieder gedacht habe: "Die CSS-Glaubenskrieger koennen mich am Abend besuchen -- jetzt setzt's 'ne Layout-Tabelle."

 

[floeschen]

Der OT-Peter hat wieder mal mit seiner Layout-Tabelle zugeschlagen. Ich verwende zwar auch keine (ausser beim blog, aber den habe ich nicht selber codiert ), aber nur, um dem alten Spleen vom Speicher-Sparen nachzugehen.

@MisterG: Ich würde bei der .container-Definition keine feste Breite angeben (du hast da 600px). Mach es viel lieber mit Prozent oder einer Margin-Defintion.

 

[Peter Maurer]

Der OT-Peter [...]

Und "OT" steht hier fuer "on topic". Ernsthaft: Ich kenn' einfach keinen Weg, mittels divs und CSS auf einer Breite von x Pixeln y Einheiten, deren jeweilige Breite von der Breite ihres Inhalts abhaengt und die den verbliebenen Rest gleichmaessig auffuellen, passgenau anzuordnen.

Mit einer Tabelle hingegen geht das quasi von selbst.

 

[floeschen]

Jetzt schnall ich das ganze!

Definiere folgendes als CSS:

#Container
{
   float: left;
   width: [B]98%;[/B]
   border: 1px solid black;
}
.Text
{
   border: 1px solid black;
   [B]width: 33%;
   display: inline[/B]
}

Klappts?

 

[Peter Maurer]

Klappts?

Hoffentlich passt das fuer den Originalfrager.

Was mich betrifft, ist diese Loesung der Tabelle aus zwei Gruenden hoffnungslos unterlegen:

• Man muss die 33% explizit angeben. Mehr Zellen bedeuten also Umrechnungsaufwand. (Na gut, das liesse sich via PHP loesen, aber es ist halt viel umstaendlicher.)
• Die Breite der einzelnen Zellen ist eben nicht von ihrem jeweiligen Inhalt abhaengig.

 

[MisterG]

Das ging aber schnell!

Dann werde ich es wohl mit einer Tabelle realisieren müssen.

@flöschen: Vielen Dank für den Tipp mit display: inline. Die feste Breite vom Container ist aber so vorgegeben worden, bleibt also so.

Vielen Dank euch dreien für die schnelle Hilfe, oder für die Aussage das es keine Hilfe gibt

Grüsse,
MisterG

Edit: da kam ja noch mehr. Das mit den 33% funktioniert bei mir nicht. Aber wie Peter schon gesagt hat, ist da sowiso die Zahl fix...
Werde es wohl mit einer Tabelle lösen müssen.

 

[floeschen]

Also eine Tabelle bedeutet erstens mal viel mehr Quellcode und zweitens auch noch einiges zu rendern. Im übrigen baut sich die Seite auch noch langsamer auf.
nein, ich habe nichts gegen Tabellen, löse es aber wenn möglich anders.

 

[MisterG]

So funktioniert es mit den 33%, wenn ich es als inline definiere funktioniert das nicht.

#Container
{
   float: left;
   width: 98%;
   border: 1px solid black;
}
.Text
{
    float: left;
    border: 1px solid black;
    width: 33%;
}

Werde nun mal schauen wie ich es machen werde. Eigentlich wollte ich ja vom Tabellen-Layout weg...

Euch auf jeden Fall vielen Dank.

Gruss,
MisterG