0

Знатоки, подскажите, как правильно сделать позиционирование блоков, чтобы при разных разрешениях между ними была пропорциональная ширина? Вот то, что получилось у меня

Скриншот

Я сделал float:left блокам; задал ширину, высоту в VW; margin-right: 3vw; margin-left:auto; Но на разных разрешениях блоки ведут себя не предсказуемо. Как правильно делать? Медиазапросы для каждых 100 пикселей делать или как-то иначе?

3
  • так вы посмотрите как на том сайте сделано, и когда у вас ломается смотрите почему там не ломается
    – BOPOH
    17 авг 2015 в 8:42
  • так это я показал то, что я сделал. это моя верстка на тест-сервере 17 авг 2015 в 8:45
  • хочу знать, как нужно делать правильно, а не костылями, лишь бы работало... 17 авг 2015 в 8:45

2 ответа 2

0

Сделайте для каждого блока margin левый и правый одинаковые. Потом задайте для элемента section ширину в vw по схеме:

  (ширина блока + 2 х margin левый) х количество блоков в строке

Если дизайн адаптивный, рассчитайте ширину section для каждого варианта стиля (если в разных вариантах предусмотрено изменение количества блоков в строке).

UPD

Другой вариант, так как в выше представленном варианте между блоками удвоенный пробел (хотя его можно уменьшить в 2 раза и все будет как требуется, если для блока просто задать margin: 1.5vw;):

В этом варианте для блоков прописываем margin: 1.5vw 0 1.5vw 3vw;, а ширину section высчитываем по формуле:

 (ширина блока + левый margin блока) х количество блоков в строке + левый margin блока

То есть для двух блоков в строке шириной 25vw получаем ширину section:

 (25 + 3) х 2 + 3 = 59vw
2
  • Спасибо большое за ответ. Вот не могу понять, а зачем еще "...) х количество блоков в строке + левый margin блока..." зачем добавляем + 3vw? 17 авг 2015 в 15:39
  • @Игорь Мандич, чтобы справа от правого крайнего блока в строке был такой же отступ как и слева от левого крайнего. Блоки же влево прижимаются из-за float: left;
    – Visman
    17 авг 2015 в 15:47
0

Пользуйтесь функцией calc() в css3. Например, у вас ширина блока 20vw, тогда делаем так

.block {
margin-right: calc(100vw / 4 - 20vw * 4 / 3);
}
.block:nth-child(4n) {
margin-right: 0;
}

Если укажете значения в %, будет тоже прекрасно работать

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.