Question

让我们说我们想让下表反应灵敏。

＆＃13;

-(void)layoutSubviews{
    self.preferredMaxLayoutWidth = self.frame.size.width;
    [super layoutSubviews];
}

＆＃13;

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

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

在td上设置显示块不是解决方案，我不希望这两个图像在彼此之下。有人可以帮助我吗？

Answer 1

这个问题似乎非常广泛，因为不清楚你确实拥有哪种标记，哪些规则可以被认为是明确的......等等。

但是如果你真的有一个带有交替序列的图像和文本的HTML表格，那就是＆＃34;图像行，文本行，图像行，文本行和＃34;然后有内容有问题。

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

既然你说你不想改变表格标记，而且因为你很可能需要改变一些东西，那么我建议你用HTML5的方式做，那对于像这样的工作是使用the <figure> and <figcaption> elements。

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

使用<figure>元素
将所有文本移至之前创建的<figure>元素，并将其括在<figcaption>标记中。
删除用于包含文本的行。

然后将display: inline-block;应用于td，您将获得以下结果。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

在每个下面的不同TR堆叠TD

1 个答案: