Лучший способ представить 1/3 из 100% в CSS?

У меня есть большой <div> с тремя маленькими <div> внутри него, inline. Каждый из них имеет ширину 33%, но это вызывает некоторые проблемы с выравниванием, потому что 3 * 33%!= 100%. Каков наилучший способ представить идеальную треть в CSS? Может быть, только 33,33%?

Ответ 1

Теперь, когда calc широко поддерживается среди современных браузеров, вы можете использовать:

#myDiv {
    width: calc(100%  /3);
}

Или вы можете использовать это как резерв, если ваш браузер не будет его поддерживать:

#myDivWithFallback {
    width: 33.33%;
    width: calc(100% / 3);
}

Ответ 2

Вы делаете какие-либо скидки на маржи? Вы можете пойти на 30% за столбец с 5% маржи по обе стороны от центральной колонки.

Быстрый пример

Ответ 3

.col_1_3 {
    width: 33%;
    float: left;
}

.col_1_3:nth-of-type(even) {
    width: 34%;
}

Ответ 4

Экран с самым высоким разрешением непроизводительный экран NEC LCD с разрешением 2800x2100. Даже при этом размере один пиксель составляет 0,0357% от ширины экрана. Таким образом, 33.33% должен быть достаточно близко, пока не станут стандартными экраны шириной 5000 пикселей.

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