在每个下堆叠来自不同 TR 的 TD

Question

假设我们想让以下 table 响应。

<table>
  <tr>
    <td>Dog Image</td>
    <td>Cat Image</td>
  </tr>
  <tr>
    <td>Dog Text</td>
    <td>Cat Text</td>
  </tr>
</table>

最好的解决方案是什么？我想要的（使用 CSS 完成）：

Dog Image
Dog Text

Cat Image
Cat Text

在 td 上设置显示块不是解决方案，我不希望两个图像相互重叠。有人可以帮我吗？

Answer 1

这个问题似乎很宽泛，因为不清楚您确实拥有哪种标记，哪些规则可以假定为确定的等等...

但是如果你真的有HTMLtable图文交替排列的"row of images, row of texts, row of images, row of texts"，那么内容就有问题了。

已使用表格标记来表示非表格数据，数据本身已被拆分以符合视觉需求，而不是尊重其逻辑结构。

既然你说你不想更改 table 标记，而且你很可能需要更改某些内容，那么我建议你使用 HTML5方式，像这样的作品是 the <figure> and <figcaption> elements.

的用法

在 Javascript 的帮助下，尝试自动对源代码进行以下更改：

用 <figure> 元素包围所有图像
将所有文本移动到先前创建的 <figure> 元素，并将它们包含在 <figcaption> 标记中。
删除用于包含文本的行。

然后将display: inline-block;应用到td，你会得到如下结果。

运行演示 整页 并调整 window 的大小以查看 <td> 变得流畅。

figure {
  margin: 0;
  text-align: center;
}
td {  
  vertical-align: top;  
  display: inline-block;
}

<table>
  <tr>
    <td>
      <figure>
        <img src="http://i.stack.imgur.com/C1285.jpg" alt="Dog">
        <figcaption>“A dog is the only thing on earth that loves <br>you 
                     more than he loves himself.”
          <br>
          <a href="http://www.goodreads.com/author/show/1865038.Josh_Billings">
            Josh Billings</a>
        </figcaption>
      </figure>
    </td>
    <td>
      <figure>
        <img src="http://i.stack.imgur.com/FW9qs.jpg" alt="Cat">
        <figcaption>“What greater gift than the love of a cat.”
          <br>
          <a href="http://www.goodreads.com/author/show/239579.Charles_Dickens">
            Charles Dickens</a>
        </figcaption>
      </figure>
    </td>
  </tr>
</table>

我知道这不是您正在寻找的简单答案，但考虑到您问题的特殊性，我认为您不会在这里得到它（假设它存在）。

在每个下堆叠来自不同 TR 的 TD

Stack TD's from different TR's under each under

html

css

css-tables

responsive-design