На самом деле вам не нужно так много кода, чтобы достичь того, что вы ищете. Например:
<style>
body {
background-color: #000;
color: #FFF;
}
a {
font-family: "Broadway", Broadway, monospace;
font-size: 14px;
color: #FFF;
}
#images a {
width: 24.99%;
display: block;
float: left;
text-align: center;
}
</style>
<div id="images">
<a href="1.html" >
<img src="1.gif" alt="x" width="181" height="173" border="0" /><br />
One
</a>
<a href="2.html" >
<img src="2.gif" alt="x" width="181" height="173" border="0" /><br />
Two
</a>
<a href="3.html" >
<img src="3.gif" alt="x" width="181" height="173" border="0" /><br />
Three
</a>
<a href="4.html" >
<img src="4.gif" alt="x" width="181" height="173" border="0" /><br />
Four
</a>
</div>
Хитрость в том, чтобы выровнять элементы по горизонтали, а не по вертикали, - это «плавать» контейнеры (влево или вправо). Установив ссылки для отображения: блок; Вы можете использовать их как контейнеры вместо того, чтобы обернуть все в дополнительные
s. Я установил ширину 25% (или 24,99%, чтобы избежать ошибки округления в некоторых браузерах), чтобы они равномерно распределялись по странице, но вы можете захотеть другое выравнивание, которое легко сделать с помощью полей / отступов и / или разная ширина на контейнерах. Также обратите внимание, что когда вы устанавливаете цвет текста в теле {}, вам не нужно указывать его снова в другом месте, кроме ссылок. То же самое относится и к семейству шрифтов, хотя это также наследуется ссылками. Удачи с проектом!