Question

我正在尝试获取这4张图片，下面的链接文字显示为2x2。我尝试的所有东西都会弄乱一些东西并发送一份AWOL。我试过了表<td><tr>等等。

这就是我到目前为止......

<br />
<div class="image" style="display:inline-block">
<img src="image.jpg" alt="" />
<div style="display:table-caption;caption-side:bottom;">
<a href="http://www.example.com">
   <center>text for link!!!!!</center>
</a>
<img src="image.jpg" alt="" />
<div style="display:table-caption;caption-side:bottom;">
<a href="http://www.example.com">
   <center>text for link!!!!!</center>
</a>
<img src="image.jpg" alt="" />
<div style="display:table-caption;caption-side:bottom;">
<a href="http://www.example.com">
   <center>text for link!!!!!</center>
</a>
<img src="image.jpg" alt="" />
<div style="display:table-caption;caption-side:bottom;">
<a href="http://www.example.com">
   <center>text for link!!!!!</center>
</a>

Answer 1

你不需要任何牌桌。请尝试以下代码：

＆＃13;

.image-wrapper {
  box-sizing:border-box;
  float: left;
  margin-bottom:5px;
  width: 50%;
}

.image-wrapper:nth-child(even)
{
  padding-left:5px;
}

.image-wrapper:nth-child(odd)
{
  padding-right:5px;
}

.image-wrapper > img {
  width: 100%;
}

.image-wrapper > span {
  display: inline-block;
  width: 100%;
}

＆＃13;

<div class="image-wrapper">
  <img src="http://placehold.it/500x150" />
  <span>Caption</span>
</div>

<div class="image-wrapper">
  <img src="http://placehold.it/500x150" />
  <span>Caption 2</span>
</div>

<div class="image-wrapper">
  <img src="http://placehold.it/500x150" />
  <span>Caption 3</span>
</div>

<div class="image-wrapper">
  <img src="http://placehold.it/500x150" />
  <span>Caption 4</span>
</div>

＆＃13;

Answer 2

如果是时事通讯，您绝对需要<table> s 才能在热门电子邮件客户端中使用此功能。 Most email clients do not display HTML/CSS as web browsers do和<table>可以在电子邮件客户端中获得最佳报道。

以下是一些在所有电子邮件客户端中显示2x2网格安全的基本代码。

<br />
<table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td style="text-align: center;">
            <img src="image.jpg" alt="" />
            <br />
            <a href="http://www.example.com">text for link!!!!!</a>
        </td>
        <td style="text-align: center;">
            <img src="image.jpg" alt="" />
            <br />
            <a href="http://www.example.com">text for link!!!!!</a>
        </td>
    </tr>
    <tr>
        <td style="text-align: center;">
            <img src="image.jpg" alt="" />
            <br />
            <a href="http://www.example.com">text for link!!!!!</a>
        </td>
        <td style="text-align: center;">
            <img src="image.jpg" alt="" />
            <br />
            <a href="http://www.example.com">text for link!!!!!</a>
        </td>
    </tr>
</table>

如何在2x2网格中并排显示图片

2 个答案: