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

Question

我正在尝试获取这 4 张图像，下面带有链接文本以显示为 2x2。我尝试的一切最终都会把事情搞砸并发送一部分擅离职守。我试过表格<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

您不需要任何表格。试试下面的代码：

.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%;
}

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

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 网格中并排显示图片

How to display pictures side by side in a 2x2 grid

html

css

newsletter