उसी पंक्ति पर <figure> छवियों को प्रदर्शित करने के लिए कैसे करें HTML/CSS

Question

मेरे पास तत्वों के भीतर कैप्शन वाले तत्वों के भीतर 4 छवियां हैं।

प्रत्येक छवि एक दूसरे को पसंद अंतर्गत प्रदर्शित होता है:

छवि
शीर्षक

छवि
शीर्षक

छवि
शीर्षक

छवि
शीर्षक

मैं छवियों की तरह की तरह प्रकट करने के लिए होगा:

छवि छवि छवि छवि
शीर्षकशीर्षकशीर्षकशीर्षक

मेरे HTML:

<div id="earlylife_images"> 
      <figure> 
       <img src="images/early/moore01.jpg" alt="Roger Moore Teenage" width="150" height="150"> 
       <figcaption>A young Roger Moore</figcaption> 
      </figure> 

      <figure> 
       <img src="images/early/moore02.jpg" alt="Roger Moore 30's" width="150" height="150"> 
       <figcaption>Roger Moore in his 30's</figcaption>      
      </figure> 

      <figure> 
       <img src="images/early/moore03.jpg" alt="Roger Moore as James Bond" width="150" height="150"> 
       <figcaption>Roger Moore as James Bond</figcaption> 
      </figure> 

      <figure> 
       <img src="images/early/moore04.jpg" alt="Roger Moore Recent" width="150" height="150"> 
       <figcaption>Roger Moore in more recent years</figcaption>    
      </figure> 

      </div> 

Answer 1

मैं के बारे में सोच रहा था:

figure { 
    width: 25%; 
    float: left; 
    margin: 0; 
    text-align: center; 
    padding: 0; 
} 

आप इसे यहाँ देख सकते हैं: http://jsfiddle.net/cBkTc/3/

Answer 2

figureinline-block करें।

figure { 
    display: inline-block; 
}