Какой способ лучше

psywalker · May 9, 2009

Ребят, ситуация следующая:

Я знаю два нормальных на мой взгляд способа обтекания левого блока правым, в первом для правого блока используется margin-left: 200px, а во втором overflow: hidden;, но загвоздка в том, что я очень часто использую именно второй способ из-за того, что слышал, что он лучше первого, но сегодня решил попробовать первый и подумал, почему это он интересно хуже, и вродебы даже лучше, вот и обращаюсь за советом к мастерам, скажите:

1) Какойже из этих способов лучше и почему?

2) А может быть у вас есть свои способы, было бы очень интересно посмотреть :rolleyes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
  div.wrap{ 
		 overflow: hidden;
		 height: 1%;
		 margin-bottom: 30px;
  }
		  /* Первый способ */
		  div.left1 { float: left; width: 200px; background: #00c;}
		  div.right1 { margin-left: 200px; background: #f00;}


		  /* Второй способ */
		  div.left2 { float: left; width: 200px; background: #00c;}
		  div.right2 { 
				overflow: hidden; /* Для всех броузеров */ 
				zoom: 1; /* Для IE6 */
				background: #f00;
		  }
</style>
</head>

<body>

<div class="wrap">
	<div class="left1">LEFT-1</div>
	<div class="right1">RIGHT-1</div>
</div>

<div class="wrap">
	<div class="left2">LEFT-2</div>
	<div class="right2">RIGHT-2</div>
</div>

</body>
</html>

Edited May 9, 2009 by psywalker

SelenIT · May 9, 2009

Если не ошибаюсь, еще вариант — display:table. В IE 6-7, как и во II варианте, вместо него работает hasLayout в лице zoom (или любом другом).

Основной недостаток первого варианта, на мой взгляд — привязка к определенной ширине левого блока (хотя в большинстве практических случаев это не критично).

А вот

overflow: hidden;
height: 1%;

для обертки — имхо, очень рискованная вещь. Стоит появиться определенной высоте у предка (напр., в случае растягивания на всю высоту окна и "прибивания" подвала), как контейнеры во всех браузерах, кроме IE6, "скукожатся". Лучше использовать все тот же zoom, имхо...

s0rr0w · May 9, 2009

Первый способ, как по мне, лучше.

На него не влияет наличие или отсутствие контента в левой части

Edited May 9, 2009 by s0rr0w

psywalker · May 10, 2009

SelenIT

Стоит появиться определенной высоте у предка (напр., в случае растягивания на всю высоту окна и "прибивания" подвала), как контейнеры во всех браузерах, кроме IE6, "скукожатся". Лучше использовать все тот же zoom, имхо...

Извините, не совсем понял вас, изложите вашу мысль поподробнее пожалуйста :rolleyes:

s0rr0w

Первый способ, как по мне, лучше.
На него не влияет наличие или отсутствие контента в левой части

А на второй как влияет? :blink:

psywalker · May 11, 2009

Если есть возможность ребят, ответьте пожалуйста :rolleyes:

Edited May 11, 2009 by psywalker

SelenIT · May 11, 2009

Функция height: 1% для контейнера — врубить hasLayout в IE6-7, в др. браузерах overflow:hidden самодостаточен для того, чтобы float-ы из него не вываливались. А так высота в 1% — это и есть высота в 1% от предка (если у того она задана). Пока высота предку не задана, все хорошо (высота контейнера игнорируется, а overflow:hidden заставляет его растянуться по контенту), но стоит задать высоту предку — контейнер сплющится до 1% его высоты, а его содержимое из-за того же overflow:hidden тупо обрежется...

psywalker · May 11, 2009

SelenIT

Извините пожалуйста, я запутался, сначала вы вроде пишите, что: "Функция height: 1% для контейнера — врубить hasLayout в IE6-7, в др. браузерах overflow:hidden самодостаточен" , но в тоже время говорите, что это плохо, так всё таки, какой способ лучше всего для того, что бы float-ы не вываливались? :rolleyes:

SelenIT · May 11, 2009

Плохо, что этот height: 1% (нужный по большому счету только для IE6) виден нормальным браузерам, где толку от него ноль, а вред возможен. Лучше и показывать его только IE6 (а на мой характер — вообще заменить на более нейтральный, хоть и невалидный, zoom: 1)...

psywalker · May 11, 2009

SelenIT

А на IE7 overflow:hidden нормально подействует без height: 1%, контейнер не будет схлопываться, если внутри него float-ы? Мне просто казалось, что и IE7 тоже не может без него :rolleyes:

Кстати zoom: 1; уже с недавних пор валидное средство :blink:

Edited May 11, 2009 by psywalker

SelenIT · May 11, 2009

А на IE7 overflow:hidden нормально подействует без height: 1%, контейнер не будет схлопываться, если внутри него float-ы?

Насколько я помню, нормально (и IE8 в режиме эмуляции "семерки" это подтверждает).

zoom: 1; уже с недавних пор валидное средство

В CSS3-таки включили? А в какой модуль? Я нашел только указание, что его будет поддерживать 4-й Сафари, а в спеках (даже черновиках) пока не натыкался...

psywalker · May 11, 2009

В CSS3-таки включили? А в какой модуль?

Извините SelenIT, я не знаю, но я просто уже не раз проверял Валидатором ,уже месяца три zoom: 1; проходит Валидацию :rolleyes:

SelenIT · May 11, 2009

Интересно, только что проверил здесь — не прошло даже как CSS3...

psywalker · May 11, 2009

странно, у меня тоже, но до этого я проверял ни один раз, и всё было хорошо :rolleyes:

Sign In

Какой способ лучше

Question

Link to comment

Share on other sites

12 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

Join the conversation

Обсуждения

Important Information