html - 画像を水平方向に揃える CSS

Question

3 つの画像を縦ではなく横に並べたいのですが、これを実現する最も簡単な方法は何ですか? 例

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

フィドル

Answer 2

フローティングする画像を含む div が必要です。

次のコード セクションを CSS に追加します。

#christmas_promotion_boxes > *{
    float:left;
}

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

Answer 3

これを追加

#christmas_promotion_boxes div{
float: left;

}