Math в CSS - более точные проценты

Это, как я сделать страницу 3 колонки с равными размерами:Math в CSS - более точные проценты

<div class="wrapper"> 
    <div style="width:33%;float:left;background-color:red;"></div> 
    <div style="width:33%;float:left;background-color:green;"></div> 
    <div style="width:33%;float:left;background-color:blue;"></div> 
</div>

Есть ли способ, чтобы избежать использования width:33% и ввести более точное число? Я в порядке с вариантами javascript.

источник

2013-02-16 krtek

Duplicate? http://stackoverflow.com/questions/5158735/best-way-to-represent-1-3rd -of-100-in-css –

Я думаю, что на '33.33%' ошибка меньше пикселя. – sachleen

33.33% достаточно, no1s будет сидеть с увеличительным стеклом и рассчитать ширину столбцов –

Не можете ли вы напрямую использовать width:33.33%? Это не невозможно. Это даже не особенно сложно, с использованием таблиц display: table., если вы знаете свой размер экрана. Тем не менее, корректирующие таблицы все еще разрабатываются

Compatibility table для поддержки CSS Отображение таблиц в настольных и мобильных браузерах. Некоторые исправления IE 7, относящиеся к таблице CSS, - here.

источник

2013-02-16 17:56:27

Таблицы отлично работают, если вы знаете свой размер экрана. Однако регрессивные таблицы все еще разрабатываются. – sheriffderek

@sheriffderek да..и знаю об этом факте. –

Я предполагаю, что вы это сделали. Это было скорее запиской для человека, который задал вопрос. :-) – sheriffderek

Это может быть выполнено с использованием CSS3 calc() property.

CSS:

div.column { 
    width: 33.33%; /* Fallback in case the browser does not support calc() */ 
    width: -webkit-calc(100%/3); /* Chrome 19 and above */ 
    width:    -moz-calc(100%/3); /* Firefox 4 and above */ 
    width:         calc(100%/3); /* IE 9 and above */ 
}

HTML:

<div class="wrapper"> 
    <div class="column" style="float:left;background-color:red;"></div> 
    <div class="column" style="float:left;background-color:green;"></div> 
    <div class="column" style="float:left;background-color:blue;"></div> 
</div>

JS Fiddle Example

Browser Compatibility Table

источник

2013-02-16 18:06:21 JSW189

Хорошая точка на спаде. Я уже несколько лет дисконтировал вычет. не должно ли падение вернуться наверх? – sheriffderek

@sheriffderek Хорошая добыча, я считаю, что вы правы относительно резервной позиции. Я изменил свой ответ, чтобы отразить это. – JSW189

Я продолжаю искать больше ясности в этом вопросе. Я имею в виду, что вы хотите, чтобы последний был последним. Таким образом, не префиксный, даже если он еще не готов (и в будущем), и вы хотите rgb или # 000 выше rgba и т. Д. ... но что лучше для других ... Я бы подумал - ms- -0- -moz- -webkit- – sheriffderek

Прежде всего - получить тыс OSE стили из HTML-:

<body> 
    <section class="main-content"> 
     <div class="colum01">Column01</div> 
     <div class="colum02">Column01</div> 
     <div class="colum02">Column01</div> 
    </section> 
</body>

В вашем CSS:

.main-content { 
    width: 100%; 
    float: left; 
    overflow: hidden; 
} 

.column01 { 
    width: 33%; 
    float: left; 
    background-color: red; 
} 

.column02 { 
    width: 34%; 
    float: left; 
    background-color: orange; 
} 

.column03 { 
    width: 33%; 
    float: left; 
    background-color: yellow; 
}

или вы можете использовать 33,3 и 33,4 и 33,3%

Я держу при условии, что каждый использует пограничный ящик: это будет делать все волшебство, как только вы начнете заполнение. прижимает прокладку внутри коробки вместо OutSite, так что вам не придется беспокоиться о сложении всех дополнений и ширинов, чтобы сделать 100%

Paul Irish on the subject

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Если вы используете списки для отображения вещей в столбцах вы можете: nth нацелить 3-й элемент в каждом столбце и поместить только 33,4% на те, которые только ... Использование calc в настоящее время не поддерживается широко, и использование javaScript по-прежнему будет создавать стили для вы. Поэтому я бы предложил сохранить все как можно проще. Это отлично работает для меня. (и он избавляется от этой досадной маленькой черной линии, которая появляется, когда вы используете 33,3% на всех 3.

источник

2013-02-16 18:51:47 sheriffderek

(Пограничный блок будет расположен ближе к верхней части вашего css) – sheriffderek

В большинстве случаев 33.333333 --- Кажется, что в процентах до 6 процентов в процентах до того, как оно повторится ... так что я только начал делать это как стандарт. или как, [32] [2] [32] [2] [32] с 2% желобами. – sheriffderek

Math в CSS - более точные проценты

ответ

Смежные вопросы