Richten Sie die Bilder horizontal CSS

Ich soll ausrichten, meine drei Bilder horizontal statt vertikal, was ist der einfachste Weg, dies zu erreichen? Beispiel 

<div id="christmas_promotion_boxes">
            <div id="christmas_promo_1">
                <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
            </div>
            <div id="christmas_promo_2">
            <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
            </div>
            <div id="christmas_promo_3">
                <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
            </div>
        </div>

#christmas_promotion_boxes {width:1000px; margin:0 auto 0 auto; text-align:center;}
InformationsquelleAutor Karina McGourty | 2013-10-30
  1. 13

    Anzeige des divs als inline-block etwa so :

    #christmas_promotion_boxes div {
  display: inline-block;
}

    Fiddle

    InformationsquelleAutor Patsy Issa
  2. 2

    Müssen Sie die div ' s mit den Bildern zu geschwommen werden.

    Fügen Sie diesen code in Ihre css:

    #christmas_promotion_boxes > *{
    float:left;
}

    http://jsfiddle.net/tDfCR/5/

    • Ihr schwimmt, alles, was die linken gerne, dass nicht nur die divs.
    • Nein, das ist die Auswahl nur die direkten Nachkommen (in diesem Fall ist nur die divs)
    • Oups, meine schlechte, verpasste der >
    • Keine Sorge! Ich wählte diese Methode, so, wenn er bringt mehr divs innerhalb des übergeordneten divs, Sie werden nicht geschwommen.
    InformationsquelleAutor Joel Worsham
  3. 2

    Wenn ich inline-Elemente, die ich immer steckte Sie in einem ul und zeigen Sie die li-inline. Auf diese Weise müssen Sie nicht haben, um sorgen über schwebende nichts und es ist viel besser skalierbar.

    <ul>
  <li id="christmas_promo_1"><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li>
  <li id="christmas_promo_2"><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li>
  <li id="christmas_promo_3><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li>
</ul>

ul{
 width:5em
}

li{
 display:inline;
 list-style-type:none;
}
    InformationsquelleAutor zazvorniki
  4. 1

    Etwas anders aus @zazvorniki akzeptiert Antwort:

    <div class="christmas_promotion_boxes">
    <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/>
    <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/>
    <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/>
</div>

.christmas_promotion_boxes {
    width: 1000px;
    margin: 0 auto 0 auto;
    display: inline-block;
}

    http://jsfiddle.net/tDfCR/114/

    Stellen Sie sicher, dass die width größer ist die Summe aller Breite von allen Bildern.

    InformationsquelleAutor Gianfranco P.
  5. 0

    fügen Sie diese

    #christmas_promotion_boxes div{
float: left;

    }

    InformationsquelleAutor Munkhtsol Batchuluun
Schreibe einen Kommentar