Question

我正在尝试将多个嵌套在图形元素中的图像并排对齐。我希望每张图片都有自己的个性标题。但是，当我加入时，它们会并排停止对齐。这是我目前的代码;

<figure>
   <img src="image1.jpg" alt= "image1" width="195" height="195">
      <figcaption>image1</figcaption>
   <img src="image2.jpg" alt= "image2" width="195" height="195">
      <figcaption>image2</figcaption>
   <img src="image3.pjg" alt= "image3" width="195" height="195">
      <figcaption>image3</figcaption>
   <img src="image4.jpg" alt= "image4" width="195" height="195">
      <figcaption>image4</figcaption>
</figure>

Answer 1

希望这可以帮助，至少它对我有用。我在bootstrap proyect中遇到了同样的问题，我用这段代码解决了它：

<ul class="list-unstyled list-inline text-center">
  <li>
    <img src="image1.jpg" alt= "image1" width="195" height="195">
    <figcaption>image1</figcaption>
  </li>
  <li>
    <img src="image1.jpg" alt= "image2" width="195" height="195">
    <figcaption>image2</figcaption>
  </li>
  <li>
    <img src="image3.jpg" alt= "image3" width="195" height="195">
    <figcaption>image1</figcaption>
  </li>
  <li>
    <img src="image1.jpg" alt= "image4" width="195" height="195">
    <figcaption>image4</figcaption>
  </li>
</ul>

bootstrap.css中这些类的css是：

.list-unstyled {
        padding-left: 0;
        list-style: none;
    }
    .list-inline {
        padding-left: 0;
        margin-left: -5px;
        list-style: none;
    }
    .list-inline > li {
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px;
    }
    .text-center {
        text-align: center;
    }

Answer 2

如前所述，您不应/不得在单个figcaption内使用多个figure标记。

您可以将图片及其figcaption标记捆绑在嵌套的figure标记内。

<figure>
<figcaption>Caption for the bundle of images</figcaption>

    <figure>
    <img src="picture1.jpg" alt="Description of picture 1">
    <figcaption>Caption for Picture 1</figcaption>
    </figure>

    <figure>
    <img src="picture2.jpg" alt="Description of picture 2">
    <figcaption>Caption for Picture 2</figcaption>
    </figure>

</figure>

Answer 3

这不能回答你的问题，但是......不要这样做。

只有一个元素可以嵌套在<figure>

中

你可以有很多图像，但每个图形都应该只有一个图标。

对图形使用单个figcaption，或将标记更改为：

<figure>
   <img src="image1.jpg" alt= "image1" width="195" height="195">
   <figcaption>image1</figcaption>
</figure>
<figure>
   <img src="image2.jpg" alt= "image2" width="195" height="195">
   <figcaption>image2</figcaption>
</figure>
<figure>
   <img src="image3.pjg" alt= "image3" width="195" height="195">
   <figcaption>image3</figcaption>
</figure>
<figure>
   <img src="image4.jpg" alt= "image4" width="195" height="195">
   <figcaption>image4</figcaption>
</figure>

Answer 4

你不应该在图中使用多个figcaption

The <figcaption> element is optional and can appear before or after the content within the <figure>. Only one <figcaption> element may be nested within a <figure>, although the <figure> element itself may contain multiple other child elements (e.g., <img> or <code>). 见http://html5doctor.com/the-figure-figcaption-elements/

但是如果你坚持在每个数字上使用多个figcaption，你可以使用css float:left

来做到这一点

<figure>
    <div style="float:left" >
      <img src="image1.jpg" alt= "image1" width="195" height="195">
      <figcaption>image1</figcaption>
    </div>
    <div style="float:left" >
        <img src="image2.jpg"  alt= "image2" width="195" height="195">
        <figcaption>image2</figcaption>
    </div>
    <div style="float:left" >
       <img src="image3.pjg" alt= "image3" width="195" height="195">
       <figcaption>image3</figcaption>
    </div>
    <div style="float:left" >
       <img src="image4.jpg" alt= "image4" width="195" height="195">
      <figcaption>image4</figcaption>
    </div>
</figure>

http://jsfiddle.net/ZQLCq/1/

Answer 5

您可以执行以下操作...

图中不包括超过figcaption。见http://html5doctor.com/the-figure-figcaption-elements/

将数字包裹在div和span中。

<div>
<span>
  <figure>
    <img src="image1.jpg" alt= "image1" width="195" height="195">
    <figcaption>image1</figcaption>
  </figure>
 </span>
 <span>
  <figure>
    <img src="image2.jpg" alt= "image1" width="195" height="195">
    <figcaption>image2</figcaption>
  </figure>
</span>
</div>

然后使用css对齐它。见Align span next to each other

vertical-align:top;

你可以在这里玩这个 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_figcaption

Answer 6

如果即使将图片和图形标题标记与css display：inline-block一起使用后，图像仍连续显示为之字形，则请执行以下操作

<div class="container">
  <figure>
   <img src="image.jpg" width=150px; height=150px;>
   <figcaption>image.jpg</figcaption>
  </figure>
</div>

css:
.container{
 display: flex
}

如何将图中嵌套的图像与图形并排对齐？

6 个答案: