Css разделяет ширину от 100% до 3 столбцов

Ответ 1

Идеальная 1/3 не может существовать в CSS с полной кросс-браузерной поддержкой (что-либо ниже IE9). Я лично сделал бы: (Это не идеальное решение, но оно примерно так же хорошо, как вы получите для всех браузеров)

#c1, #c2 {
    width: 33%; // 1/3 of 100%
}

#c3 {
    width: auto;
    //or width:34%;
}

Ответ 2

Используйте CSS calc():

body {
  margin: 0;
}

div {
  height: 200px;
  width: 33.33%; /* as @passatgt mentioned in the comment, for the older browsers fallback */
  width: calc(100% / 3);
  display: inline-block;
}

div:first-of-type { background-color: red }
div:nth-of-type(2) { background-color: blue }
div:nth-of-type(3) { background-color: green }

<div></div><div></div><div></div>

Ответ 3

Как насчет использования гибкой модели CSS3:

Код HTML:

<div id="wrapper">
    <div id="c1">c1</div>
    <div id="c2">c2</div>
    <div id="c3">c3</div>
</div>  

Код CSS:

*{
    margin:0;
    padding:0;
}

#wrapper{
    display:-webkit-flex;
    -webkit-justify-content:center;

    display:flex;
    justify-content:center;

}

#wrapper div{
    -webkit-flex:1;
    flex:1;
    border:thin solid #777;

}

Ответ 4

Используя эту скрипту, вы можете играть с width каждого div. Я пробовал как в Chrome, так и в IE, и вижу разницу в ширине между 33% и 33.3%. Я также замечаю очень небольшую разницу между 33.3% и 33.33%. Я не замечаю никаких различий, кроме этого.

Разница между 33.33% и теоретическим 33.333...% является просто 0.00333...%.

Для аргументов, скажем, ширина экрана 1960px; довольно высокое, но общее разрешение. Разница между этими двумя ширинами остается только 0.065333...px.

Итак, более двух знаков после запятой разница в точности незначительна.

Ответ 5

В случае, если вам интересно, в системе шаблонов Bootstrap (которая очень точна), вот как они делят столбцы, когда вы применяете класс .col-md-4 (1/3 из системы с 12 столбцами)

CSS

.col-md-4{
    float: left;
    width: 33.33333333%;
}

Я не фанат float, но если вы действительно хотите, чтобы ваш элемент составлял 1/3 вашей страницы, у вас нет выбора, потому что иногда, когда вы используете элемент inline-block, браузер может рассмотреть пространство в вашем HTML как 1px пробел, который сломает ваш идеальный 1/3. Надеюсь, это помогло!

Ответ 6

На всякий случай кто-то все еще ищет ответ,

пусть браузер позаботится об этом. Попробуйте следующее:

• display: table в элементе контейнера.
• display: table-cell для дочерних элементов.

Браузер равномерно разделит его на наличие 3 или 10 столбцов.

ИЗМЕНИТЬ

элемент контейнера должен также иметь: table-layout: fixed иначе браузер будет определять ширину каждого элемента (большую часть времени не так уж и плохо).

Ответ 7

Просто, чтобы представить альтернативный способ исправить эту проблему (если вы действительно не заботитесь о поддержке IE):

Мягко кодированное решение должно было бы использовать display: table (без поддержки в IE7) вместе с table-layout: fixed (для обеспечения столбцов равной ширины).

Подробнее об этом здесь.

Ответ 8

Я обнаружил, что иногда требуется 6 десятичных знаков (по крайней мере, в Chrome), чтобы 1/3 возвращал идеальный результат.

Например, 1140px/3 = 380px

Если у вас было 3 элемента в контейнере 1140, они должны были иметь ширину, равную 33.333333%, прежде чем инструмент инспектора Chrome покажет, что они находятся на 380 пикселей. Любое меньшее количество десятичных знаков, а Chrome возвращает меньшую ширину 379.XXX px

Ответ 9

.selector{width:calc(100% / 3);}

Ответ 10

Обновление 2018 Это метод, который я использую width: 33%; width: calc(33.33% - 20px); Первые 33% предназначены для браузеров, которые не поддерживают calc() внутри свойства width, вторые должны быть снабжены поставщиками префиксами -webkit- и -moz- для лучшей кросс-браузерной поддержки.

#c1, #c2, #c3 {
    margin: 10px; //not needed, but included to demonstrate the effect of having a margin with calc() widths/heights
    width: 33%; //fallback for browsers not supporting calc() in the width property
    width: -webkit-calc(33.33% - 20px); //We minus 20px from 100% if we're using the border-box box-sizing to account for our 10px margin on each side.
    width: -moz-calc(33.33% - 20px);
    width: calc(33.33% - 20px);
}

тл; др учёт твоей маржи

Ответ 11

Я не думаю, что вы можете сделать это в CSS, но вы можете вычислить идеальную ширину пикселя с помощью javascript. Скажем, вы используете jQuery:

Код HTML:

<div id="container">
   <div id="col1"></div>
   <div id="col2"></div>
   <div id="col3"></div>
</div>

Код JS:

$(function(){
   var total = $("#container").width();
   $("#col1").css({width: Math.round(total/3)+"px"});
   $("#col2").css({width: Math.round(total/3)+"px"});
   $("#col3").css({width: Math.round(total/3)+"px"});
});