Обновление и резюме
Я чувствую себя обязанным прояснить этот вопрос, теперь, когда к нему добавлена награда.
( Кроме того, я почти уверен, что это будет ребенокиграть, когда поддерживается * единица измерения 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 пикселей ( или независимо от размера поля ) большую ширину области содержимого, чем его братья и сестры.
Это может показаться безобидным, даже незаметным;однако есть несколько случаев, когда необходимо точное ( как можно более точное ) распределение ширины между элементами либо необходимо, либо могло бы сделать все в целом проще.
И так, независимо от того, используются ли отступы, поля или некоторые их комбинацииЕсть ли какое-либо решение для жидкостных колонн с фиксированными полями, с равномерным распределением пространства желоба, которое не отнимает «маргинальную» (*** хаха *) область содержимого от соседних колонок? **
Оригинальный вопрос
Из-за простого отсутствия результатов в моих поисках и попытках я пришел к выводу, что это невозможно.Если где-то и может быть дан ответ, я уверен, что он здесь.
Есть ли способ, используя чистый CSS, добиться создания колонного макета с изменяемой шириной и фиксированной шириной полей?
Важное примечание : эта цифра является лишь примером, а не конкретным макетом, которого я хочу достичь.Данное решение должно разрешать любую комбинацию соседних столбцов, общее распределение ширины которых должно составлять 12 или менее.Для справки рассмотрим популярную сетку 960 .
Примечание : в 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) псевдо-селекторы.