У меня есть 4 меньших (320x312 px) изображений и одно большее прямоугольное изображение (541x602 px). Моя цель - разместить 2 меньших изображения на каждой стороне большего. 3 меньших места, которые мне нужны, но последний (нижний левый угол) совершенно неуместен, расположен ниже, чем нужно. Код точно такой же, и я не могу его поднять. Я создал иллюстрацию.
Демо здесь: http://jsfiddle.net/QWStS/
Мне нужно, чтобы фиолетовая фигура была под черным, и выровнялась с синим справа от нее.
это код:
HTML5
<div class="container">
<div class="box-image">
<img src="1.png">
</div>
<div class="box-image">
<img src="3.png">
</div>
<div class="box-image">
<img src="4.png">
</div>
<div class="box-image">
<img src="5.png">
</div>
<div class="box-image">
<img src="2.png">
</div>
</div>
CSS:
.container {
padding-top: 20px;
width: 1200px;
margin:0 auto;
}
.container .box-image {
float: left;
}
Кроме того, попробуйте следующее: http://codepen.io/anon/pen/Btqup
Не требует поплавков и будет довольно гибким, если бы я не использовал пиксели для измерения.
Объяснение: Есть три столбца (div.large). В первом и третьем столбцах имеются небольшие ящики (div.smallbox), которые составляют половину ширины, минус немного для заполнения. Код довольно понятен, хотя - проверьте его.
возможно, вам следует создать 3 столбца: в первом столбце вы можете поместить два небольших изображения, во втором положить большое изображение и, наконец, поместить два небольших изображения в последний столбец. Затем примените ширину и поплавок: слева на каждом столбце.
Будьте осторожны, общая ширина трех столбцов должна быть ниже ширины вашего контейнера.