Доброго времени суток,
уважаемые форумчане!
Есть у меня проблема, которую, как мне кажется, можно решить легко, но я уже слишком погрузился и не вижу очевидного, поэтому прошу совета у вас.
Есть у меня макет, положил в миниатюры. Суть его в том, что материалы в нем бесконечные, будут подгружаться, но это другая песня.
Сверстаны они вот так:
<div class="section group">
<div class="col span_1_of_3">
<div class="postbox">
Пост номер один
</div>
<div class="postbox">
Пост номер четыре
</div>
</div><!-- Closing tag: .col-->
<div class="col span_1_of_3">
<div class="postbox">
Пост номер два
</div>
<div class="postbox">
Пост номер пять
</div>
</div><!-- Closing tag: .col-->
<div class="col span_1_of_3">
<div class="postbox">
Пост номер три
</div>
<div class="postbox">
Пост номер шесть
</div>
</div><!-- Closing tag: .col-->
</div><!-- Closing tag: .section group-->
Заданы свойства через css (два файла, так что запросы не объединены):
.section{clear:both;margin:0;padding:0;}
.group:before,.group:after{content:"";display:table;}
.group:after{clear:both;}
.group{zoom:1;}
.col{display:block;float:left;margin:1% 0 0 1.6%;}
.col:first-child{margin-left:0;}
@media only screen and (max-width: 480px) {
.col{margin:1% 0;}
}
.span_3_of_3{width:100%;}
.span_2_of_3{width:66.1%;}
.span_1_of_3{width:32.2%;}
@media only screen and (max-width: 480px) {
.span_3_of_3,.span_2_of_3,.span_1_of_3{width:100%;}
}
@media only screen and (max-width: 768px) {
.span_1_of_3{width:100%;}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.span_1_of_3{width:49.2%;max-width::400px; }
}
На телефоне они спокойно расходятся в ширину, на планшете в две колонки, но вот с планшетом беда. Сами колонки из трех становятся двумя, но материал из третьей колонки, становится второй и получается, что третья колонка получает многим больше материала, чем первая. (Миниатюра 2)
Думаю вопрос уже все предугадали
Как с этим бороться?
У меня в голове пока две версии:
1) Пересмотреть верстку, но идеи пока нет каким образом
2) Перемещать элементы с помощью JS из второго столбца в первый, если их там больше чем половина плюс два. Вроде это возможно, судя по googlопоиску
Так что прошу помощи у вас! Заранее спасибо!
