Question

如何将图片与下方的标题并排放置？我目前正在使用一个表来实现这个效果，它看起来像这样：

<table align="center">
  <tr>
     <td>
        <img style="width: 200px; height: 275px" src="image"/>
         <br/><a href="link">title</a>
     </td>
     <td>
        <img style="width: 200px; height: 275px" src="image"/>
        <br/><a href="link">title</a>
     </td>
  </tr>
</table>

我想知道是否有更好的方法可以在不使用表的情况下执行此操作。

Answer 1

您可以使用div来执行此操作。

简单的事情：

<ul>
  <li class="container">
    <img class="image" src="#"/>
    <span class="caption">my caption</span>
  </li>
  <li class="container">
    <img class="image" src="#"/>
    <span class="caption">my caption</span>
  </li>
</ul>

然后你正在看

.container {
  float: left;
}

.image {
  display: block
}

.caption {
  display: block;
  width: 100%;
  text-align: center; //assuming centered captions
}

您可能需要外部UL元素的clearfix（如果您想使用列表来表示图像列表）。不确定，但也有图/ figcaption路线，但如果您不考虑html5元素，这将没有问题。

如上所述，我建议在这种情况下使用UL / OL，因为在语义上它可能是一个图像列表。即使你带着数字走这条路线，我也会说把数字放在每个列表项中。

Answer 2

使用HTML5标签

<强> CSS

figure{
    display: inline-block;
}

<强> HTML

<figure>
    <img src='image.jpg' alt='missing' />
    <figcaption>Caption goes here</figcaption>
</figure>
<figure>
    <img src='image.jpg' alt='missing' />
    <figcaption>Caption goes here</figcaption>
</figure>

figure{
display: inline-block;
}

<figure>
    <img src='image.jpg' alt='missing' />
    <figcaption>Caption goes here</figcaption>
</figure>
<figure>
    <img src='image.jpg' alt='missing' />
    <figcaption>Caption goes here</figcaption>
</figure>

如何将图像与下方的标题并排放置？

2 个答案: