У меня проблема с CSS, как решить?

Question

[Дмитрий]

тестовая страница



Я плохо знаю CSS, только учусь.

Имеется проблема:
Появляется артефакт, показанный на изображении выше.
Если удалить один из блоков .blog, так чтобы страница вся вмещалась ( без вертикального скролла ) - артефакт пропадает.

Если CTRL "+", CTRL "-" -то пропадает, то появляется.

Спасибо.

Answer 1

[Sergey Romanov]

Проблема в этом

.blog-list li:first-child + li {
    margin-left: 2%;
}

У вас старнно сделана верстка. Есть 3 колонки. А маргины только у центральной. Да сумма 3 х 32 + 2 + 2 = 100. Но тут есть проблемы при зумировании. Кратность может не попасть в 4 или 2. Поэтому это видно только на центральной так как отступы применены только к ней и белый фон просматривается так как кратность не совпадает именно для этой колонки на некоторых зумах.

Решение

Нужно сделать сначала чистый грид

<div class="grid">
    <div class="cell">
    </div>  
    <div class="cell">
    </div>  
    <div class="cell">
    </div>  
</div>

.grid .cell {
   float: left;
   width: calc((100% - 40px) / 3);
   margin-right: 20px; 
}
.grid .cell:last-child {
   margin-right: 0px; 
}

Значит тут мы высчитываем ширину колонки если это 3 колонки и растояние между колонками всего 20 пикселей. Так как у нас всего 2 промежутка то сумма промежутков будет 40 пикселей. Получается 100% - 40 пикселей это конечная ширина для колонок. Делим на 3 и получаем ширину колокни.

Теперь в нутрь грида можно вставлять что угодно.

Но я бы посоветовал использовать готовые решения как например bootstrap где сетка не только готова, но может так же адоптироваться под мобильные устройства.

Comments

[Дмитрий]

Спасибо, проблема в процентах и их округления

что странного в верстке ?
левый и правый блок должны быть прижаты к левому и правому краю соответственно. И поэтому маргин задаю только для центральной.

посмотрел как подобную ситуацию обыгрывает bootstrap.

.row {
  margin: 0 -15px;
}
.col {
  width: 33.33333333%
}

мне не нравиться, неужели нет лучшего решения?

[Дмитрий]

На сколько calc кроссбраузерен ?

[Sergey Romanov]

Дмитрий: Норамальная поддержка caniuse.com/#feat=calc

> что странного в верстке ?

Обчно разметка и элменты разделяются. Это значит что на разметку или колонки должен быть один див а уже в нем сам эелемент отображаемый.

[Дмитрий]

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