如何在同一行 HTML/CSS 上显示 <figure> 图像答案

【问题标题】：How to display <figure> images on same line HTML/CSS如何在同一行 HTML/CSS 上显示 <figure> 图像
【发布时间】：2014-05-28 15:32:14
【问题描述】：

我在元素中有 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>

【问题讨论】：

标签： inline figure

【解决方案1】：

制作figureinline-block。

figure { 
    display: inline-block;
}

【讨论】：

【解决方案2】：

我在想：

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

您可以在这里查看：http://jsfiddle.net/cBkTc/3/

【讨论】：

非常感谢！工作一种享受

【解决方案3】：

创建一个div 并在其中添加figure（创建figure inline-block）

HTML

<div>
   <figure>
      <img src="">
      <figcaption>1</figcaption>
   </figure>
   <figure>
      <img src="">
      <figcaption>2</figcaption>
   </figure>
</div>

CSS

div {
    text-align: center;
}
figure {
    display: inline-block;
    text-align: center;
}

【讨论】：