Почему мои изображения не выравниваются правильно?

Question

CSS очень новый для меня, хотя я готов учиться, но я не могу решить эту проблему.

У меня есть неупорядоченный список, содержащий семь маленьких изображений по левой стороне страницы внутри контейнера.

Я хочу выстроить три изображения в нижней части страницы под списком.

Эти нижние три изображения, похоже, выстраиваются в линию, где справа от столбца будет, если он растягивается, а затем выходит из контейнера. Изображения находятся в таблице, но если есть лучший способ, я буду счастлив использовать его.

Там много кодирования, так что я не уверен, что ставить здесь, но URL является:

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

Answer 1

Вы можете управлять шириной, управляя шириной 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 и вы помещаете большой размер изображения, который вы должны изменить в размере, который вы видите в браузере, чтобы увеличить скорость загрузки вашего браузера.

Answer 2

Я хотел бы предложить вам использовать div с вместо table с. Я сделал короткую скрипку, где вы можете проверить, как я хотел бы сделать что jsFiddle