CSS жидкие макеты с фиксированными отступами / полями

Question

Мне было интересно, знает ли кто-нибудь о способе добавления отступов ширины пикселя или полей в дизайн колонки с текучей средой, без необходимости в дополнительной разметке HTML.

Для дальнейшей иллюстрации рассмотрим простую схему HTML / CSSкак этот:

<style>
    .cont{width:500px;height:200px;border:1px solid black;}
    .col{float:left;}
    #foo{background-color:blue;width:10%;}
    #bar{background-color:yellow;width:30%;}
    #baz{background-color:red;width:60%;}
</style>
<div class="cont">
    <div class="col" id="foo">Foo</div>
    <div class="col" id="bar">Bar</div>
    <div class="col" id="baz">Baz</div>
</div>

Отображается правильно (не учитывая различные ошибки отображения CSS, о которых можно позаботиться).Однако, как только вы добавите, скажем, отступ в 10 пикселей к классу col, плавающие элементы больше не будут отображаться встроенными.То же самое происходит, если вы хотите поместить границу размером 3 пикселя в класс col.Я видел методики CSS, где люди будут использовать отрицательное поле, чтобы обратить вспять добавленные пиксели, созданные из блочной модели, но это все равно не уменьшит ширину <div>.В общем, я хочу использовать технику, которая позволит мне сохранять ширину 10%, но 10px из этих 10% будет заполнением (или полем, или чем-то другим).

Answer 1

Не существует решения до CSS3 без «дополнительной разметки HTML».width не включает отступы и границы, это просто характер спецификации.Если вы хотите избежать отрицательных полей, тогда просто одна дополнительная обертка в каждом div работает.CSS:

.padder {border: 3px solid green; padding: 10px;}

HTML:

<div class="cont">
    <div class="col" id="foo"><div class="padder">Foo</div></div>
    <div class="col" id="bar"><div class="padder">Bar</div></div>
    <div class="col" id="baz"><div class="padder">Baz</div></div>
</div>

Для совместимости с CSS3 см. Ответ bobince, который использует box-sizing.

Answer 2

Вы можете сделать это, используя box-sizing, чтобы изменить значение width так, чтобы оно включало отступ (и рамку - немного похоже на блочную модель в режиме Quirks, без других недостатков).

box-sizing - это предложенный стиль CSS3, который, к сожалению, означает, что он не будет работать в старых и малоизвестных браузерах, и все еще требует префикса в некоторых браузерах.

.col{
    float:left; padding: 10px;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}

Что еще более важно, он не работает в IE до IE8. Если вы не хотите компенсировать это, переводя эти браузеры в режим Quirks - и вы действительно не хотите этого делать - вы можете попробовать один из сценариев / вариантов исправления ошибок, который пытается реализовать box-sizing в IE6-7.

Если этого недостаточно, вам придется вернуться к методу обертки, как цитирует Скотта. По крайней мере, это будет работать везде.

В любом случае, будьте осторожны с процентами, которые в сумме составляют 100%, и с разметкой жидкости. Если ширина пикселя не делится на проценты, которые вы используете, вы получите округление. WebKit обычно округляется вниз, что может оставить вас на один-два пикселя от полной ширины; IE6-7 будет округляться до ближайшего, который, если вам не повезет, может оставить вас на один или два пикселя больше, что приведет к неожиданному переносу ваших поплавков.

Answer 3

другой вариант - вручную рассчитать ширину / поле / отступ.

Это возможно, поскольку контейнер имеет фиксированную ширину.

Answer 4

Сэкономьте массу проблем и проверьте 960 сеток (960.gs), Blueprint (http://www.blueprintcss.org/) или YUI (http://developer.yahoo.com/yui/grids/)). Все эти проблемы решены так, что вы просто определяете процент(или количество сеток в случае 960) и остальная часть работы за вас. YUI и 960 даже имеют генератор, поэтому вам не нужно делать работу. В качестве дополнительного бонуса, некоторые из этих CSS-фреймворковcss "reset", который "отменяет" недостатки IE и стандартизирует шрифты, интервалы и т. д., которые сводят нас с ума парней пользовательского интерфейса.

Недавно я сделал обновление соответствия нормативным требованиям нескольких тысяч веб-страниц различного дизайна для основныхМеждународный банк. Мы вначале стандартизировали YUI, и я действительно вырос, чтобы насладиться «сеткой» из-за простоты развертывания. Он обрабатывает сайты с 1 миллионами уникальных пользователей в день без сбоев или заметных задержек. Как только вы привыкнете к тому, как это работает,Вы можете создать сайт за считанные минуты, не беспокоясь о плаваниях, заполнении и т. д. В своей личной работе я используюи Blueprint, и 960 по аналогичным причинам.