Question

我在元素中有4个图像，元素中有标题。

每张图像都显示在彼此之下，如：

IMAGE
标题

我希望图片看起来像：

图像图像图像图像
标题标题标题标题

我的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

制作inline-block figure { display: inline-block; }。

{{1}}

Answer 2

我在考虑：

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

您可以在此处查看：http://jsfiddle.net/cBkTc/3/

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

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

3 个答案: