Question

在更宽的屏幕宽度下，我在img标签上使用float:left在表格左侧有一个图像。 HTML看起来像这样：

<div>
<img>
<table>
<tr><th>This</th><td>Some fairly long content</td></tr>
<tr><th>And the other</th><td>Some fairly long content</td></tr>
</table>
</div>

但是在较窄的屏幕宽度下，我希望将图像放在信息表的顶部，而不是放在旁边。我使用媒体查询删除浮动，然后使用margin：auto使其居中。所以我的CSS是这样的：

img {float:left;width:320px;height:240px;padding:1rem;}
@media (max-width: 630px) {
  img {margin:auto;float:none;padding:0;}
  }

这样可行，但我的问题是看起来错误使图像居中（或左对齐或右对齐）。我意识到我想要的是图像的左侧与第二个表格列的左侧对齐。

这让我很难过。我需要一个可以回复IE8的解决方案。左列宽度不固定（撰稿人可以随时更改行标签）。

Answer 1

（这是我所采用的妥协解决方案;或许情况就是我真正想做的事情是不可能的？）

我在表格的第一列放了一个width。 E.g。

th {width:5rem;}

然后在图像上添加填充：

img {padding: 0 0 0 5rem;}

不理想，因为我不想控制该列的宽度...但唯一的缺点是如果后来有人在第一列中放入一个长字符串，他们的字符串会自动换行（这甚至可能是最好的）。

RWD：将表格外的对象与表格内的列对齐

1 个答案: