イメージを水平に整列させるCSS

Question

3つのイメージを垂直にではなく水平に整列させたいのですが、これを達成する最も簡単な方法は何ですか？ example

<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;} 

Answer 1

表示そう等inline-blockとしてのdiv：

#christmas_promotion_boxes div { 
    display: inline-block; 
} 

Fiddle

Answer 2

この

#christmas_promotion_boxes div{ 
float: left; 

}

を追加します

Answer 3

浮かせる画像を含むdivが必要です。

はあなたのCSSにコードのこのセクションを追加します。

#christmas_promotion_boxes > *{ 
    float:left; 
} 

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

Answer 4

私は常にULに入れとLiのインラインを表示するインライン要素を持っている場合。あなたは何かを浮かべることについて心配する必要はありませんし、はるかにスケーラブルです。 @zazvorniki受け入れ答えとは少し異なる

<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; 
} 

Answer 5

：

<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/

はwidthは、すべての画像の幅の合計ですべての大きい方であることを確認してください。