1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

CSS - DIV's gelichmässig verteilen

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von MisterG, 18.07.07.

  1. MisterG

    MisterG Golden Delicious

    Dabei seit:
    29.06.07
    Beiträge:
    8
    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:
    Code:
    #Container
    {
       float: left;
       width: 600px;
       border: 1px solid black;
    }
    .Text
    {
       float: left;
       border: 1px solid black;
    }
    
    HTML:
    Code:
    <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
     
  2. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
  3. floeschen

    floeschen Horneburger Pfannkuchenapfel

    Dabei seit:
    13.08.06
    Beiträge:
    1.402
    Definiere bei .text auch noch display: inline;
     
  4. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Mein Link war nicht das was du suchst. Du willst ja beliebig viele DIV's dran hängen können...
     
  5. Peter Maurer

    Peter Maurer Carmeliter-Renette

    Dabei seit:
    16.03.04
    Beiträge:
    3.274
    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." :D
     
  6. floeschen

    floeschen Horneburger Pfannkuchenapfel

    Dabei seit:
    13.08.06
    Beiträge:
    1.402
    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 :innocent:), aber nur, um dem alten Spleen vom Speicher-Sparen nachzugehen. :D

    @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. :)
     
  7. Peter Maurer

    Peter Maurer Carmeliter-Renette

    Dabei seit:
    16.03.04
    Beiträge:
    3.274
    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.
     
  8. floeschen

    floeschen Horneburger Pfannkuchenapfel

    Dabei seit:
    13.08.06
    Beiträge:
    1.402
    Jetzt schnall ich das ganze! :eek:

    Definiere folgendes als CSS:
    Code:
    #Container
    {
       float: left;
       width: [B]98%;[/B]
       border: 1px solid black;
    }
    .Text
    {
       border: 1px solid black;
       [B]width: 33%;
       display: inline[/B]
    }
    Klappts? ;)
     
  9. Peter Maurer

    Peter Maurer Carmeliter-Renette

    Dabei seit:
    16.03.04
    Beiträge:
    3.274
    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.
     
  10. MisterG

    MisterG Golden Delicious

    Dabei seit:
    29.06.07
    Beiträge:
    8
    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.
     
  11. floeschen

    floeschen Horneburger Pfannkuchenapfel

    Dabei seit:
    13.08.06
    Beiträge:
    1.402
    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. ;)
     
  12. MisterG

    MisterG Golden Delicious

    Dabei seit:
    29.06.07
    Beiträge:
    8
    So funktioniert es mit den 33%, wenn ich es als inline definiere funktioniert das nicht.

    Code:
    #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
     

Diese Seite empfehlen