Question

尝试制作一张包含3个水平图像的表格，通过向表格添加100％，然后100％添加到图像，以便根据屏幕重新调整尺寸，他们之前的图像尺寸设置为适合960px。 / p>

然而，第一张图像高于第二张图像 - 然后第三张图像小于第三张图像。

如何使用此表格使这些内容平等并响应屏幕大小？

<table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
<tbody>
    <tr>
        <td><a href="http://www.example.com/myfirstitem">  <src="http://www.example.com/image/data/Home Page /myfirstitem.jpg"   style="border-style:solid; border-width:10px; width: 100%;"></a></td>
        <td><a href="http://www.example.com/myseconditem"><src="http://www.example.com/image/data/Home Page /myseconditem.jpg" style="border-style:solid; border-width:10px; width: 100%;"></a></td>
        <td><a href="http://www.example.com/mythirditem"><src="http://www.example.com/image/data/Home Page /mythirditem.jpg" style="border-style:solid; border-width:10px; width: 100%;"></a></td>
    </tr>
</tbody>
</table>

Answer 1

Divs将更容易使用而不是表格，因为表格中有更多预先定义的样式可能会破坏响应能力。

＆＃13;

div {
  padding: 0;
  margin: 0 auto;
}
img {
  width: 100%;
  margin: 0 auto;
}

＆＃13;

<div>
  <img src="http://placehold.it/350x150" />
</div>

<div>
  <img src="http://placehold.it/350x150" />
</div>

<div>
  <img src="http://placehold.it/350x150" />
</div>

＆＃13;

使我的表能够以100％

1 个答案: