1

Верстаю адаптивно-резиновую сеточку, опираясь на ширину через 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 последнему элементу, но костыль какой-то.

2
  • 1
    Костыли - наше всё. Всуньте свой margin-right: -1px; не стесняясь, такое не стесняются делать даже самые "крутые" верстальщики, ибо по другому - никак(силами html/css), может на js у вас что-то с этим получится 4 авг 2017 в 12:04
  • 1
    Если бы CSS работало везде как надо и как задумано - javascript программисты лишились бы 80% своей работы. 4 авг 2017 в 12:07

2 ответа 2

2

html, body {
  margin: 0; padding: 0;
}

header {
  width: 100vw;
  overflow: hidden;
  background-color: red;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 2em;
  white-space: nowrap;
}

.item {
  display: inline-block;
  vertical-align: middle;
  width: calc(100vw / 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>

0

вариант с использование display: table + table-layout: fixed

html,
body {
  margin: 0;
  padding: 0;
}

header {
  width: 100vw;
  overflow: hidden;
  background-color: red;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 2em;
  display: table;
  width: 100%;
  table-layout: fixed;
}

.item {
  display: table-cell;
  vertical-align: middle;
  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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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