Обновление и сводка
Я чувствую себя обязанным сделать этот вопрос более ясным, теперь, когда есть щедрость.
(Кроме того, я уверен, что это будет детская игра, когда поддерживается значение единицы calc() CSS3, что-то вроде width: calc(25% - 5px), хотя мы, вероятно, будем смотреть в Интернете в наши умы к этому моменту)
Я работаю над структурой CSS для нескольких проектов, которые разделяют требования к дизайну; а именно жидкую раскладку 12 колонн. Используя плавающие элементы .column с процентной шириной (100% / 12) x col_size, это достаточно просто. Однако проблема связана с добавлением фиксированных полей (или любой формы интервала) между столбцами.
Моя первоначальная попытка использовала текущие столбцы, как описано, с ребенком .panel, вложенным в каждый. Ниже приведен фрагмент HTML/CSS (сокращенный для краткости):
.column{
float: left;
display: inline-block;
}
.width-01{ width: 8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width: 25%; }
/* etc */
.panel{
width: 100%;
padding: 5px;
box-sizing: border-box; /* so padding doesn't increase width */
}
<div class="column width-02">
<div class="panel">Width-02</div>
</div>
<div class="column width-03">
<div class="panel">Width-03</div>
</div>
<div class="column width-02">
<div class="panel">Width-02</div>
</div>
<div class="column width-05">
<div class="panel">Width-05</div>
</div>
Этот фрагмент создаст макет, аналогичный изображению ниже, однако все элементы .panel имеют отступы 5px со всех сторон. Я пытаюсь сделать краю содержимого внешних столбцов заподлицо с краем порта представления (или родительского контейнера, если на то пошло). Другим подходом было бы исключить класс .panel и просто пойти со столбцами:
.column{
float: left;
display: inline-block;
padding-left: 10px;
box-sizing: border-box;
}
.column:first-child{ padding-left: 0px; }
.width-01{ width: 8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width: 25%; }
/* etc */
<div class="column width-02">Width-02</div>
<div class="column width-03">Width-03</div>
<div class="column width-02">Width-02</div>
<div class="column width-05">Width-05</div>
Опять же, это хорошо работает, принося результаты еще ближе к результатам изображения ниже, однако теперь (актуальная) проблема заключается в том, что прокладка ест по ширине колонн, завинчивающих распределение ширины. Столбец :first-child имеет 10 пикселей (или независимо от размера поля) большую ширину области содержимого, чем его братья и сестры.
Это может показаться безобидным, даже незаметным; однако есть несколько примеров, когда наличие точного (насколько это возможно) распределения ширины между элементами либо является необходимым, либо облегчит ситуацию.
Итак, используется ли заполнение, маржа или какая-либо их комбинация; есть ли какое-либо решение для флюидных столбцов, фиксированных полей, с равномерным распределением пространства желоба, которое не будет ограждать область содержимого "marginal" (*** haha *) из соседних столбцов? **
Оригинальный вопрос
Из-за простого отсутствия результатов в моих поисках и попытках я пришел к выводу, что это невозможно. Если в любом случае можно дать ответ, я уверен, что он здесь.
Есть ли способ, используя чистый CSS, для достижения ширины столбца с шириной столбца с фиксированными полями ширины?
Важное примечание. Эта цифра - всего лишь пример, а не конкретный макет, который я хочу достичь. Данное решение должно допускать любую комбинацию соседних столбцов, общее распределение ширины 12 или менее. Рассмотрите популярную 960 grid для справки.)
Примечание. В макете с 12 столбцами распределение ширины столбцов на изображении равно 2, 3, 2 и 5 соответственно.
До сих пор я прибегал к сетке, которая, используя проценты, почти достигла этого. Проблема заключается в том, что для достижения полей каждый столбец требует дополнительного дочернего элемента (я называю их .panel):
width: 100%;
box-sizing: border-box;
padding: 10px;
Это снова почти нормально; проблема заключается в том, что первый и последний столбец имеют внешние "поля" (10px), а "поля" между каждым столбцом удваиваются (2 x 10px)
Конечно, с включением нового типа значений CSS3 calc() это можно было бы решить гораздо проще. Что-то в направлении:
.width-12 > .panel{ width: 100%; }
.width-09 > .panel{
width: calc(75% - 10px);
margin: ...;
}
У меня есть некоторые исправления Javascript, я взломал некоторые вещи, которые "работают", но я нахожусь в квесте. Надеюсь, самый священный из граалей существует.
Следующее решение, и один @avall предоставил (хотя, безусловно, хороший выбор для упрощения), к сожалению, не то, что я ищу. Основная проблема заключается в том, что поля не равномерно распределяются между столбцами.
Единственный способ, с помощью которого я вижу эту работу, - уменьшить отступ .panel до 5px и что-то вроде:
.column:first-child > .panel {
padding-left: 0px;
}
.column:last-child > .panel {
padding-right: 0px;
}
/* not necessary? in any case, haven't tested */
.column:only-child > .panel {
padding-right: 0px;
padding-left: 0px;
}
Это решение неприемлемо, только потому, что IE8 не может распознать псевдоселектора :last-child (и в этом случае :only-child).
