Я хотел бы использовать стиль, используемый или используемый для изображений /div, расположенных рядом с другими в таких сайтах, как Pinterest или Pose независимо от их индивидуального разрешения. Я попытался организовать div рядом друг с другом, как это
<div id="mainContainer">
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="differentHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
</div>
Css:
#mainContainer { width:800px; }
.sameHeightDiv{ float: left; width: 100px; height:190px; }
.differentHeightDiv { float: left; width: 100px; height:225px; }
Который устроен как
1 2 3 4
5
6 7 8
Поскольку высота 3'rd Div (.differentHeightDiv) больше, я знаю, что все будет работать, если все высоты равны, но я хочу решение, если оно неравномерно (я имею в виду, если каждый div имеет разные разрешения/пропорции). Один из них помогите мне в этом.
Спасибо.