CSS жидкие столбцы, фиксированные поля; Святой Грааль святых граалей

попробуйте это чистое решение CSS2:демо-скрипка

база CSS (скрипка без косметики):

html, body {
    padding: 0;
    margin: 0;
}
#wrap {
    padding-right: 30px;
    overflow: hidden;
}
.col {
    float: left;
    margin-left: 40px;
    margin-right: -30px;
}
.col:first-child {
    margin-left: 0;
}
.small {
    width: 16.66%;
}
.medium {
    width: 25%;
}
.large {
    width: 41.66%;
}

HTML-код:

<div id="wrap">
    <div class="col small"></div>
    <div class="col medium"></div>
    <div class="col small"></div>
    <div class="col large"></div>
</div>

протестировано на Win7 в IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 6.0, Chrome 13.0.

обновление:

Теперь, если вам нравится работать с произвольным количеством столбцов, вам нужно добавить дополнительный класса к контейнеру с указанием столбце count:

<div class="cols-12 count-04">
    <div class="col width-02"></div>
    <div class="col width-03"></div>
    <div class="col width-02"></div>
    <div class="col width-05"></div>
</div>

посмотреть эта обновленная скрипка демонстрация ряда различных подсчетов столбцов.

возможные ошибки:

теоретически, imho это решение должно работать для любого количества столбцов для каждой возможной минимальной ширины столбца в любой ширине окна браузера. Но, похоже, все браузеры оказываются не в состоянии справиться: 1. большое количество столбцов ширины столбца 1 или 2. маленький ширины окна браузера.

обратите внимание, что все браузеры с минимальной шириной 1440 пикселей, что равно 12 раз 120 пикселей (пространство, занимаемое всеми полями 10px), обрабатывают решение просто отлично. И когда вы используете 2 или более столбцов ширины colums, требование к минимальной ширине браузера действительно падает до 720 пикселей (6 * 120px). Этот последний случай звучит более реалистично, но все же я не могу объяснить это поведение браузера.

Я попытался исправить проблему, введя дополнительные последнем столбце класс, как показано эта скрипка, но это не решает проблему для небольших Ширин браузера. Это dóes решить крошечную ошибку округления из-за сломанной ширины процентов, хотя, но эта проблема может быть проигнорирована я полагаю.

Я хотел бы услышать от других экспертов css об этом, поэтому я добавил щедрость.

почему бы вам не использовать

.column > .panel {
    padding: 10px 0 10px 10px;
}

.column:first-child > .panel {
    padding-left: 0px;
}

он будет делать 10px пробелы только между ящиками и без использования последнего ребенка.

Проверьте ответ thirtydot в этом потоке для чистого CSS / HTML (жидкий макет с одинаково разнесенными "столбцами" без JavaScript)...

ширина жидкости с равным расстоянием DIVs

http://jsfiddle.net/thirtydot/EDp8R/

модификация JSFiddle демонстрирует, что "столбцы" могут быть разными фиксированными ширинами и по-прежнему иметь равные и жидкие маржи.

http://jsfiddle.net/EDp8R/43/

затем, наконец, еще один пример использования процентов при сохранении равных и жидких полей.

http://jsfiddle.net/EDp8R/45/

Я понимаю, что это может быть не точное решение, но это очень близко, я думаю.

в ссылке на исходный вопрос "есть ли способ, используя чистый CSS, достичь макета с столбцами ширины жидкости с фиксированными полями ширины?"

замечательно, как чрезвычайно трудно CSS становится с такого рода вопросами. На прошлой неделе я работал над "базовым шаблоном", чтобы создать свой собственный "Святой Грааль", включая границу, поля и отступы... Кажется, CSS не справляется с такими вопросами. Хотя вопрос в уме довольно прост, он становится (почти?) невозможно достичь в CSS, особенно в кросс-браузере.

самое смешное, что эти вопросы легко решаются с помощью таблиц. Я не понимаю, почему веб-общество вынуждает нас использовать div вместо таких неопределенных аргументов, как "семантика" и "легкий обзор", поскольку большинство аргументов слабы или даже ложны. Люди, говорящие, что таблицы дают больше проблем, явно не понимают реальной трудности, которая лежит в CSS.

в любом случае, если вы хотите имейте структуру таблицы (поскольку colums являются частью таблицы), я предлагаю использовать "display:table".

для достижения изображения под исходным вопросом с помощью чистого CSS можно использовать следующее:

в CSS

html,body{
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
    width: 100%;
    overflow: auto;
}
.table{
    background: pink;
    display: table;
    width: 100%;
    height: 100%;
}
.tableRow{
    display: table-row;         
}
.tableCell{
    display: table-cell;
    vertical-align: top;
    height: 100%;  
}
/*
    Ensures the full size of the table-cell has the behaviour of a block-element. 
    This is needed, because 'table-cell' will behave differently in different browsers.
*/
.tableCell>div{
    height: 100%;
}
/*
    Padding has to be used instead of margin in 'border-box' modus.
*/
.tableCell>div>div{
    height: 100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
/*
    The final content.
*/
.tableCell>div>div>div{
    background: lightblue;
    padding: 5px;
    height: 100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}


#col1{
    width: 16.66%;          
}
#col1>div>div{
    padding-right: 10px;
}
#col2{
    width: 25%;         
}
#col2>div>div{
    padding-right: 10px;
}
#col3{      
    width: 16.66%;
}
#col3>div>div{
    padding-right: 10px;
}
#col4{
    width: 41.66%;
}

HTML-код

<div class="table">
    <div class="tableRow">
        <div id='col1' class="tableCell">   
            <div><div><div>16.66%</div></div></div>
        </div>
        <div id='col2' class="tableCell">
            <div><div><div>25%</div></div></div>
        </div>
        <div id='col3' class="tableCell">
            <div><div><div>16.66%</div></div></div>
        </div>
        <div id='col4' class="tableCell">
            <div><div><div>41.66%</div></div></div>
        </div>  
    </div>
</div>

Я бы сказал, что это довольно преувеличено, используя дополнительные divs только для маржи, но, к сожалению, CSS не имеет модели "margin-box", которая фактически решила бы миллиард проблемы.

это количество вложенного кода может заставить вас подумать: "почему бы не использовать другие методы?- это может привести к уменьшению кода. Для очень конкретного желания это было бы так. Однако, другие методы часто включают плавать или абсолютный располагать. Эти методы не могут достичь того же: поплавки, например, может достичь столбцы, которые равны по длине, но если вы хотите границу или маржи вы окажетесь в беде. Для абсолютного позиционирования это больше похоже на напротив: вы можете решить проблему маржи, но высота может быть основана только на одном столбце.

на мой взгляд, CSS не соответствует требованиям. Хотя для positiong необходимо заменить таблицы, после всех этих лет все еще невозможно получить те же результаты. Чтобы достичь "Святого Грааля святых граалей" структуры таблицы не только самый простой способ, есть также единственный способ... по крайней мере, насколько я знаю, после сотни попыток.

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

Я использую сетку OOCSS для этого

https://github.com/stubbornella/oocss

недавно я разместил демо онлайн на своем собственном сайте, так как нет подходящих примеров в интернете: (

http://www.leipeshit.com/awesome_stuff/oocss/core/grid/grids_all.html

более простой способ получить тот же эффект-позволить содержимому внутри ваших столбцов создавать ваши желоба, а не применять поля/отступы к самим столбцам. Это можно сделать с фиксированным, жидким, эластичным и т. д. сетки.

например:

/* Gutters */
h1, h2, h3, h4, h5, h6,
p, ul, ol, blockquote,
hr, address, pre, object, fieldset
{
    margin-right: .75rem;
    margin-left: .75rem;
    padding-right: .75rem;
    padding-left: .75rem;
}

Это также упрощает калибровку столбцов, вложенность и применение фона к вашим частям lego.

Почему бы не использовать заполнение, как в первом примере, а затем установить box-sizing: border-box на всех элементах?

недавно я разработал альтернативное решение для этого, которое позволяет использовать любую комбинацию гибких столбцов в строке с фиксированным и согласованным полем во всех столбцах, независимо от ширины родительского элемента.

Это не использует JavaScript и работает в IE8+.

в этом решении маржа определяется на двух классах-поэтому ее легко изменить для адаптивных конструкций. Ширины колонки также репрезентативны космоса они используют, для пример строка 2 столбца имеет ширину 50% , а строка 4 столбца имеет ширину 25%.

вы можете увидеть пример в http://www.andrewjamestait.co.uk/conflexgrids/

или он доступен на GitHub в https://github.com/andrewjtait/conflexgrids

Если вы можете жить с другим вложенным div на столбец, вы можете определить желаемый запас для каждого. Чтобы избавиться от поля на левом и правом внешних краях, вы можете определить отрицательное поле на внешнем контейнере.

Е. Г.: Используя pureCSS pure-g-внешний контейнер, pure-u-* - узел столбца (дисплей: встроенный блок), содержащий вложенный div. интервал-это имя пользовательского расширения системы сетки pureCSS для разрешения столбца маржи.

.pure-g.spacing {
    margin: 0 -10px;
}

.pure-g.spacing [class *= "pure-u"] > div {
    margin: 10px;
}

должен работать в большинстве браузеров. Скажите мне, если это не так - я уже использую его.

С уважением, Макс!--2-->