Căn chỉnh hình ảnh theo chiều ngang CSS

Question

Tôi muốn căn chỉnh ba hình ảnh theo chiều ngang thay vì theo chiều dọc cách dễ nhất để đạt được điều này là gì? 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

hiển thị các divs như inline-block như vậy:

#christmas_promotion_boxes div { 
    display: inline-block; 
} 

Fiddle

Answer 2

thêm này

#christmas_promotion_boxes div{ 
float: left; 

}

Answer 3

Bạn cần div chứa các hình ảnh được thả nổi.

Thêm phần này của mã vào css của bạn:

#christmas_promotion_boxes > *{ 
    float:left; 
} 

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

Answer 4

Khi tôi có những yếu tố inline tôi luôn đặt chúng trong một ul và hiển thị nội tuyến của li. Bằng cách này bạn không phải lo lắng về việc làm nổi bất cứ điều gì và nó có khả năng mở rộng hơn.

<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

Hơi khác so với @zazvorniki câu trả lời được chấp nhận:

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

Hãy chắc chắn rằng width lớn tổng tất cả các chiều rộng của tất cả các hình ảnh.