effiziente Art und Weise ausrichten, divs nebeneinander?

Was ist der beste Weg, es zu schließen 3, 4 oder sogar 5 divs nebeneinander? mit einem Leerzeichen zwischen den einzelnen ein und trennt Sie auseinander.

Ich habe versucht, googeln dies, aber es scheint so viele verschiedene Antworten gibt, die scheinen einfach zu verwenden, vom Einzelfall abhängig (ich.e wenn es für 2 divs oder 3 divs, etc) im Fragen was ist der beste Weg, dies zu tun für eine beliebige Anzahl von divs?

Dank

InformationsquelleAutor | 2011-04-23

  1. 14

    Alle Antworten, die hier gegeben sind hervorragend und Sie sind die effizienteste Art und Weise. Aber ich habe versucht, um Sie einfacher zu bilden für Sie.

    HTML:

    <div id="apnd">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Nine</div>
  <div>Ten</div>
  <div>Eleven</div>
</div>

    CSS:

    #apnd div { 
        height: 100px; 
        width: 100px; 
        border: 1px solid red; 
        margin-left: 5px; 
        float: left; /*Here you can also use display: inline-block instead of float:left*/
        background: orange; 
}
    ternstyle.uns/blog/float-vs-inline-block hat einen guten walk-through von verschiedenen Techniken. Sie könnten auch erwägen Sie die Verwendung des Rasters von responsive design Frameworks wie Foundation - foundation.zurb.com

    InformationsquelleAutor thecodeparadox

  2. 4

    Andere Möglichkeit: http://jsfiddle.net/brandondurham/Tht3N/

    <div id="row">
    <div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div>
</div>

#row {
    white-space: nowrap;
}
#row > div {
    background: lightblue;
    display: inline-block;
    height: 50px;
    width: 50px;
}
#row > div + div {
    margin-left: 10px
}
    Vielen Dank für deine Antwort, kannst du bitte einfach nur gehen mir durch was ist denn hier Los? ich bin nicht vertraut mit dieser Art der CSS. Dank

    InformationsquelleAutor Brandon Durham

  3. 3

    Gibt es so etwas wie dieses:

    div.container { display:table; border-spacing:{your-space}px; }
div.container > div { display:table-cell; }

    in Ihrem "so viele verschiedene Antworten" gesetzt?

    Für heute es ist der zuverlässigste Weg, horizontalen Reihe von block-Elementen.

    Bis CSS WG akzeptieren http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm 🙂

    Hi, ich nicht wirklich verstehe, was Sie zu tun versuchen es, können Sie bitte ein sehr einfaches code Beispiel 3 divs ausgerichtet nebeneinander? Dank

    InformationsquelleAutor c-smile

  4. 0

    Versuchen Sie dies:

    div {
float:left
margin-left:20px; //or whatever you want
}

div:first-child {
margin-left:0;
}

    InformationsquelleAutor Maverick

Schreibe einen Kommentar