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

1
2
3
4
5
6
<div style="float: left;position: relative;height: 200px;width: 160px;overflow: hidden;">
     <img src="img/kartinka.png" alt="" style="position: absolute;bottom: 10px;left: 10px;" />
</div>
<div style="float: left;position: relative;height: 200px;width: 160px;overflow: hidden;">
     <img src="img/kartinka2.png" alt="" style="position: absolute;bottom: 10px;left: 10px;" />
</div>

Теперь разберу пример для наглядности:
1. Делаем выравнивание по левому краю(float: left;)
2. Устанавливаем способ позиционирования относительно его исходного места(position: relative;)
3. Делаем фиксированную высоту и ширину(height: 200px;width: 160px;)
4. И прячем то, что будет выходить за рамки нашего блока(overflow: hidden;)

Это то, что касаемо блока. Теперь пишем стиль для самой картинки:

1. Устанавливаем способ позиционирования абсолютный(position: absolute;)
2. Затем пишем отступы снизу и слева(bottom: 10px;left: 10px;)

Таким образом, картинки будут выравниваться у нас по левому нижнему краю и не нужно каждую подгонять, чтобы они стояли ровно.