Дробные значения в CSS

kvant · January 11, 2011

Нужно поделить резиновую страницу на 3 равные части.

Примерно вот так:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<style>
body {
	min-width: 800px;
}

div.column {
	width: 33.3%;
	float: left;
	height: 500px; /*временно*/
}

.first {
	background: #fc0;
}
.second {
	background: #cf0;
}

.third {
	background: #0cf;
}

</style>
<body>
<div class="column first">
</div>
<div class="column second">
</div>
<div class="column third">
</div>
</body>
</html>

Проблема в ширине блока. Поставил 33.3%, вроде работает, но есть сомнение, будет ли это работать во всех браузерах.

Насколько корректно вообще писать в CSS дробные значения?

Протуберанец · January 11, 2011

кажется псивалкер недавно сообщал, что дробные проценты не работают в опере

апд. ну то есть дробная чать просто съедается, как будто ее нету

Edited January 11, 2011 by Протуберанец

Vlad · January 11, 2011

Не работают, подтверждаю.

Протуберанец · January 11, 2011

а вот, нарыл, даже с примером.

Проверил щас поддержку дробных процентов. Опера меня очень огорчила. По моему единственный браузер, которые их не поддерживает. Уже 11 версия и до сих пор никак не реализуют. Позор. Браузер упал в моих глазах.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	* { margin: 0; padding: 0;}

		div.one { width: 16%; background: red; margin: 20px 0;}
		div.two { width: 16.8%; background: red; margin: 20px 0;}
</style>
</head>

<body>

	<div class="one">sjdfksdj</div>
	<div class="two">sjdfksdj</div>
</body>
</html>

kvant · January 11, 2011

Не работают, подтверждаю.

А как же тогда быть? На широком мониторе разница в один процент существенна. Заказчики не любят когда криво. Делать страницу фиксированной ширины не хочется.

Протуберанец · January 11, 2011

ну если сделать средний блок 34%, не думаю, что невооруженным взглядом будет заметно

Great Rash · January 11, 2011

Траблы с дробями не только в Опере, ИЕ, Мозилла и вебкиты так же по своему округляют дробные значения (особенно ИЕ). Так что, по возможности от дробей лучше отказаться.

Рекомендую к прочтению статью

Vlad · January 11, 2011

А если заметят, скажешь, что фича! Так и задумывалось.

kvant · January 11, 2011

Рекомендую к прочтению статью

Классная статья, спасибо.

А если заметят, скажешь, что фича! Так и задумывалось.

В принципе да, но проблема не в том, что заметят, а в том, что нарушается красота решения задачи. То что я привел - это только пример, на самом деле на ширину столбца много чего завязано и если столбцы не равной ширины, то увеличивается количество классов в css как минимум в 2 раза и тем самым усложняется дальнейшая поддержка сайта.

Но раз так, придется извращаться.

Joyfit · January 11, 2011

а нельзя ширину столбца который пошире в отдельный класс записать и столбцу задать 2 класса - 1 как у всех столбцов и второй с шириной?

fan · January 12, 2011

А если общий контейнер 99% и по центру, а уже в нём делить по 33%????????

Vlad · January 12, 2011

Любое значение родителя 100% будет, а не 99 или чего-там-еще.

psywalker · January 12, 2011

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

Great Rash · January 12, 2011

Самое простое заюзать таблицу в 3 колонки <_<

psywalker · January 12, 2011

Самое простое заюзать таблицу в 3 колонки

Не, ну это совсем другое дело

Sign In

Дробные значения в CSS

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information