css - 为什么我的图像排列不正确？

Question

CSS 对我来说很新，虽然我很愿意学习，但我无法解决这个问题。

我有一个无序列表，其中包含容器内页面左侧的七个小图像。

我想在列表下方的页面底部排列三个图像。

这三个底部的图像似乎与列右侧的位置对齐，如果它向下拉伸然后从容器中取出。图像在表格中，但如果有更好的方法，我会很乐意使用它.

有很多编码，所以我不知道在这里放什么，但 URL 是：

http://www.c5d.co.uk/coursehistoryfour.php

Answer 1

我建议你使用divs 而不是tables。我做了一个简短的小提琴，你可以在其中检查我会如何做那个jsFiddle

Answer 2

您可以通过管理宽度来管理宽度td，然后是图像宽度 100%

<table>
<tbody>
<tr>
<td witdh="33%"><img width="100%" height="" alt="JWK" src="http://www.c5d.co.uk/JWK.jpg" title="J W Kenworthy" class="renouf"> J W Kenworthy: The First President</td>
<td width="33%"><img width="100%" height="" alt="" src="http://www.c5d.co.uk/parnaby.jpg" title="Henry Parnaby" class="renouf">Rev<sup>d</sup> Henry Parnaby: The First Captain</td>
<td width="33%"><img width="100%" height="" alt="" src="http://www.c5d.co.uk/renouf.jpg" title="Tommy Renouf" class="renouf">Thomas Renouf: Course Designer</td>
</tr>
</tbody>
</table>

但最好使用div而不是table放置较大的图像尺寸，您必须将其调整为您在浏览器上看到的实际尺寸，以提高浏览器的加载速度。