[HTML] [CSS] Divs nebeneinander mit gleichem Abstand untereinander und zu parent

Dieses Thema im Forum "Webentwicklung" wurde erstellt von myth2806, 9. September 2008 .

  1. 9. September 2008
    [CSS] Divs nebeneinander mit gleichem Abstand untereinander und zu parent

    Hi,

    also ichhab das Problem das ich ein paar Divs nebeneinander (float, schon klar) ausrichten will... allerdings sollen die Absände
    Code:
    parentWandLinks --- Div1 --- Div2 --- Div3 --- parentWandRechts
    überall gleich sein.
    Hoffe es ist klar geworden wie ich mir das vorstelle XD

    greez myth
     
  2. 10. September 2008
    AW: [CSS] Divs nebeneinander mit gleichem Abstand untereinander und zu parent

    wie breit sollen sie sein?

    HTML:
    <html>
    <head>
    <title>dein titel</title>
    <style type="text/css">
    <!--
    #div_1 {
     position: absolute;
     left:0px;
     top:0px;
     width:300px;
     height:500px;
     z-index:1;
    }
    #div_2 {
     position:absolute;
     left:310px; /* die 300 (breite) vom 1. DIV + den Abstand dazwischen! */
     top:0px;
     width:300px;
     height:500px;
     z-index:2;
    }
    #div_3 {
     position:absolute;
     left:620px; /* die 300 + 310 + den Abstand dazwischen! */
     top:0px;
     width:300px;
     height:500px;
     z-index:3;
    }
    #div_4 {
     position:absolute;
     left:930px; /* die 620 + breite vom DIV + den Abstand dazwischen! */
     top:0px;
     width:300px;
     height:500px;
     z-index:4;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="div_1"></div>
    <div id="div_2"></div>
    <div id="div_3"></div>
    <div id="div_4"></div>
    </body>
    </html>
    
     
  3. 11. September 2008
    AW: [CSS] Divs nebeneinander mit gleichem Abstand untereinander und zu parent

    @Ragnaroek: Er wollte das Ganze gefloatet und nicht absolute positioniert, soweit ich das verstanden habe und deine Lösung ist viel zu Umständlich, da müsste man ja immer alles neu positionieren, wenn ein Element mal ne andere Breite bekommt.

    Hier mein Vorschlag:
    HTML:
    <html>
    <head>
    <title>Title</title>
    <style type="text/css">
     #float_container div {
     width: 300px; /* Hier einfach die Breite der einzelnen Divs eintragen */
     margin-right: 10px; /* Abstand nach Rechts */
     margin-left: 10px; /* Abstand nach Links */
     float: left; /* Float halt */
     border: 1px solid #000; /* Schwarzer Rand um die Divs zur Übersichtlichkeit */
     }
    </style>
    </head>
    <body>
    <div id="float_container">
     <div>
     <h1>Div Nummer 1</h1>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
     </div> 
     <div>
     <h1>Div Nummer 2</h1>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
     </div> 
     <div>
     <h1>Div Nummer 3</h1>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
     </div> 
     <div>
     <h1>Div Nummer 4</h1>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
     </div>
    </div>
    </body>
    </html>
    
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.