Верстаю адаптивно-резиновую сеточку, опираясь на ширину через vw и высчитывая ширину колонок через calc, потому что 100vw при делении на число колонок иногда даёт бесконечную десятичную дробь (flexbox в моём случае не очень удобен, но это уже совсем другая история, вопрос не про него).
Проблема в том, что при использовании calc
блоки, которые по идее идеально влезают в одну строчку, на практике таки не влезают. Разверните пример ниже на всю страницу и покрутите ширину окна браузера: последний блок то влезает, то съезжает, как минимум в Firefox.
html, body {
margin: 0; padding: 0;
}
header {
width: 100vw;
overflow: hidden;
background-color: red;
font-family: Arial, Helvetica, sans-serif;
line-height: 2em;
}
.item {
float: left; /* флоат убирает пробелы между элементами */
width: calc(100vw * 1.0 / 13.0);
background-color: white;
text-align: center;
}
.item:nth-child(2n) {
background-color: #e5e5e5;
}
<header>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
</header>
Причём такое поведение не воспроизводится при числе колонок 6 или 12. Воспроизводится при 16, но calc(100vw / 16.0)
хотя бы можно заменить на 6.25vw
, ибо делится. Здесь я воткнул 13 для наглядности.
Я догадываюсь, что такое происходит из-за ограниченной точности вычислений, но всё-таки — какие есть способы избежать подобного поведения и запихнуть-таки всё в одну строчку и без flexbox? (И без css grid layout, ибо не кроссбраузерно.) Пока на ум приходит что-то вроде margin-right: -1px
последнему элементу, но костыль какой-то.
margin-right: -1px;
не стесняясь, такое не стесняются делать даже самые "крутые" верстальщики, ибо по другому - никак(силами html/css), может на js у вас что-то с этим получится