Небольшая, но очень интересная задачка по верстке.

Great Rash · February 16, 2010

Дан вот такой код:

<!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" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma, Arial, sans-serif;
		}

		body {
			margin: 10px;
		}

		.main-box {
			width: 150px;
			border: 1px solid;
		}

		.a, .b, .c {
			width: 50px;
			height: 50px;
			border: 1px solid;
		}

		.a {
			background: red;
		}

		.b {
			background: green;
		}

		.c {
			background: blue;
		}
	</style>
</head>

<body>

	<div class="main-box">
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
	</div>

</body>
</html>

Необходимо расположить блоки a, b и c в ряд.

Вопрос первый:

Если вы заметили, то у блоков есть бордер и, следовательно, их ширина не 50 пикселей, а 52. Значить если прописать блокам тупо float: left; они в контейнер не поместятся.

Внимание вопрос: как при помощи CSS сделать так, чтобы блоки уместились в родителе?

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

Вопрос второй:

Если всем трем блокам (a, b и c) установить float: left;, а родителю (main-box) установить ширину в 156 пикселей, то блоки внутрь влезут, но блок main-box схлопнется.

Внимание вопрос: как при помощи CSS сделать так, чтобы блок main-box тянулся по высоте соответвтсенно контенту, т.е. его высота стала равной высоте блоков a, b или c?

Решение должно быть кроссбраузерным, нельзя использовать overflow: hidden; и пустой блок с clear: both;

Я тут просто на собеседовании был и мне там поставили такие задачи. На них я не ответил, из чего сделал вывод, что собеседование не прошел. Приехал домой и ломал голову... решения так и не нашел. Интересно до жути как такое сделать можно.

У кого какие соображения?

Shugich · February 16, 2010

> Внимание вопрос: как при помощи CSS сделать так, чтобы блоки уместились в родителе?

Никак.... Давай дам другой пример.

В стакан вмещается 200мл воды... Как вместить туда 500мл воды?

Тут тоже самое... В 150 пикселей невозможно впихнуть 156 пикселей.

Great Rash · February 16, 2010

А вот и возможно, пятнадцать минут гугления дали следующие результаты:

.a, .b, .c {
	width: 50px;
	height: 50px;
	border: 1px solid;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

Работает в Мозилле 3.5 и ИЕ 8. Как сделать кроссбраузерно не допер.

Не понятно почему у меня не влазит в ИЕ 6, там же блочная модель другая должна быть.

Shugich · February 16, 2010

По второму вопросу... Дабы не схлопывался нужно задать для .main-box float: left

> как при помощи CSS сделать так, чтобы блок main-box тянулся по высоте соответвтсенно контенту

Ну тут два вариант.

1. Таблица.

2. Делаем для родителя фоновую картинку такую же, как цвет фона и растягиваем по вертикали в родителе...

Все, других вариантов нету.

Код:

<!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" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma, Arial, sans-serif;
		}

		body {
			margin: 10px;
		}

		.main-box {
			width: 154px;
			border: 2px solid;
			float: left;
			background: url('http://shugich.ru/bg.png') repeat-y;
			height: 500px;
		}

		.a, .b, .c {
			width: 50px;
			height: 50px;
			float: left;
		}

		.a {
			background: red;
			border-right: 1px solid;
		}

		.b {
			background: green;
			border-left: 1px solid;
			border-right: 1px solid;
		}

		.c {
			background: blue;
			border-left: 1px solid;
		}
	</style>
</head>

<body>

	<div class="main-box">
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
	</div>

</body>
</html>

> Мозилле 3.5

В 3.6 не работает...

Great Rash · February 16, 2010

Вы слишком категоричны. Решения наверняка есть. Использование таблиц категорически запрещено. Задавать родителю float тоже не выход ибо тогда сам родитель выпадет из потока.

Продолжаю гуглить и жду еще варианты решений.

Justnewone · February 16, 2010

можно например обоих влево отфлоатить и сделать -1px левого маргина первому, и -1px правого второму. Сам не проверяю, внимание, только со стороны умничаю =)

А, если нельзя флоатить - то отриц. маргины вверх на 50 px и настолько положительный влево второму

По второму вопросу - родителю а б и с дать height: 50px; =)))

Great Rash · February 16, 2010

По первому вопросу написал, что нельзя юзать отрицательные маргины.

Если есть время, то прошу все-таки код выкладывать. А то на словах туго доходит :lol:

Не, высоту естественно задавать тоже низя.

Justnewone · February 16, 2010

По первому вопросу написал, что нельзя юзать отрицательные маргины.
Если есть время, то прошу все-таки код выкладывать. А то на словах туго доходит
Не, высоту естественно задавать тоже низя.

1.

<!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" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma, Arial, sans-serif;
		}

		body {
			margin: 10px;
		}

		.main-box {
			width: 150px;
		}

		.main-box-inner {
			width: 156px;
			border: 1px solid;
		}

		.a, .b, .c {
			width: 50px;
			height: 50px;
			border: 1px solid;
		}

		.a {
			background: red;
		}

		.b {
			background: green;
		}

		.c {
			background: blue;
		}
	</style>
</head>

<body>

	<div class="main-box"><div class="main-box-inner">
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
	</div></div>

</body>
</html>

Так, например, хотя, мне кажется, надо картинку прикреплять, с аннотациями, так слишком много вариантов решений )

2.

.main-box {
			width: 150px;
			height: 50px;
			border: 1px solid;
		}

.a, .b, .c {height: 50px;} - почему эе нельзя родителю высоту задать? не понимаю. Покажите макет, со стрелками, че резиновое (а тут, я вижу вообще не ту резины), если приведенный код - типа просто стопкадр.

Shugich · February 16, 2010

можно еще задать родителю position: relative, а сами блоки абсолютами вырованять... как вариант...

Great Rash · February 16, 2010

Justnewone:

Нельзя создавать дополнительные контейнеры.

Shugich:

Да, это вариант. Интересно прокатил бы он на собеседовании... Я об этом варианте даже не задумывался.

psywalker · February 16, 2010

Shugich:

Да, это вариант. Интересно прокатил бы он на собеседовании... Я об этом варианте даже не задумывался.

Погодите, а что толку то, ведь всё равно в сумме по ширине блоки больше, чем контейнер.

Если бы можно было родительский сделать побольше по ширине, то вот такой вариант

<!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" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma, Arial, sans-serif;
		}

		body {
			margin: 10px;
		}

		.main-box {
			width: 156px;
			border: 1px solid;
			white-space: nowrap;
		 }

		.a, .b, .c {
			width: 50px;
			height: 50px;
			border: 1px solid;
			display: inline-block;

		}

		.a {
			background: red;
		}

		.b {
			background: green;
		}

		.c {
			background: blue;
		}
	</style>
</head>

<body>

	<div class="main-box">
		<div class="a"></div><div class="b"></div><div class="c"></div>
	</div>

</body>
</html>

Great Rash · February 16, 2010

Это да. Есть решение как эмулировать box-sizing в ИЕ6?

Про инлайн-блоки было первым о чем я подумал. Но тут остается проблема с ИЕ6. Хотя хз, можно ли по условию задачи использовать кандишнл каменты или CSS-хаки...

psywalker · February 16, 2010

Это да. Есть решение как эмулировать box-sizing в ИЕ6?

Ну помойму только дополнительный контейнер

Justnewone · February 16, 2010

Justnewone:
Нельзя создавать дополнительные контейнеры.
Shugich:
Да, это вариант. Интересно прокатил бы он на собеседовании... Я об этом варианте даже не задумывался.

мне кажеца это развод =). Очень важный показатель спеца - когда он говорит "а вот так не сделать" - "Вы уверены?" - "Да, я уверен".

Может на это проверяли.

Я не встречал никогда 4-го решения флоат блоков и тянущегося в высоту родителя, только оверфлоу, пустой клир-блок и указание непосредственной высоты. Тут ее, кстати, можно указать и в условии нету что ее указывать нельзя.

А первый вопрос - вообще какая то ересь... Вы просто представьте, для начала, как это может выглядеть на макете? Там есть инструмент "выделение", который четко покажет, какой кто ширины. если блок с бордером, то он будет "виден", и его ширина точно покажет все остальные решения, коих может быть и не одно. Короче, бредятина. Аналдогия со стаканом воды - в точку!

Great Rash · February 16, 2010

Короче, бредятина. Аналдогия со стаканом воды - в точку!

А как же свойство box-sizing?

По поводу второго вопроса додумался до такого решения (тоже некроссбраузерно):

<!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" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma, Arial, sans-serif;
		}

		body {
			margin: 10px;
		}

		.main-box {
			width: 150px;
			border: 1px solid;
		}

		.a, .b, .c {
			width: 50px;
			height: 50px;
			border: 1px solid;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-ms-box-sizing: border-box;
			float: left;
		}

		.a {
			background: red;
		}

		.b {
			background: green;
		}

		.c {
			background: blue;
			float: none;
			margin-left: 100px;
		}
	</style>
</head>

<body>

	<div class="main-box">
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
	</div>

</body>
</html>

Смотреть лучше в Мозилле.

UPD:

ща проверил, кстати, работает везде кроме ИЕ6(7).

Shugich · February 16, 2010

> Очень важный показатель спеца - когда он говорит "а вот так не сделать" - "Вы уверены?" - "Да, я уверен".

Аха, я тоже так думаю....

А по поводу второго, то я предложил рабочее решение...

> Задавать родителю float тоже не выход ибо тогда сам родитель выпадет из потока.

Из какого потока... У нас только три блока в одном блоке... При моем решении все так же, как было бы если бы версталось таблицей (к примеру). Все четко, ровно, кроссбраузерно...

Больше нет никаких элементов. Это вся верстка.

> А как же свойство box-sizing?

А box-sizing не кроссбраузерен.

Great Rash · February 16, 2010

Из какого потока... У нас только три блока в одном блоке...

Надо мыслить шире, представьте, что это некий блок на абстрактом сайте, в котором еще 3 блока.

Shugich · February 16, 2010

> Надо мыслить шире, представьте, что это некий блок на абстрактом сайте, в котором еще 3 блока.

Нет никакого сайта. Есть просто три квадрата! Задание найти одно решение. Одно решение найдено.

Если бы это бы сайт, то как можно объяснить запрет на использование overflow: hidden и clear: both?

Вот-вот. Никак.

Просто проверяют вашу сообразительность.

Justnewone · February 16, 2010

А как же свойство box-sizing?

Повторюсь, именно макет решает все. Если применен box-sizing, значит тело уже не 50 а 48, визуально. Проблема решается 1 строкой. Не говоря про то, что 20% пользователей не смогут это оценить. В общем... ТЗ или постановка задачи не продуманы. =)

psywalker · February 16, 2010

Готово дружище :lol:

<!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" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma, Arial, sans-serif;
		}

		body {
			margin: 10px;
		}

		.main-box {
			width: 150px;
			border: 1px solid;
			display: inline-block;
			//display: inline;

		}
	   *html .main-box {display: inline;}
	   *html .a{display: inline; zoom:1;}
	   *html .b {display: inline;zoom:1;}
	   *html .c {display: inline;zoom:1;}

	   *+html .main-box {display: inline;}
	   *+html .a{display: inline; zoom:1;}
	   *+html .b {display: inline;zoom:1;}
	   *+html .c {display: inline;zoom:1;}

	   .a, .b, .c {
			width: 50px;
			height: 50px;
			border: 1px solid;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-ms-box-sizing: border-box;
			float: left;
		}

		.a {
			background: red;
		}

		.b {
			background: green;
		}

		.c {
			background: blue;
		}
	</style>
</head>

<body>

	<div class="main-box">
		 <div class="a"></div><div class="b"></div><div class="c"></div>
	</div>

</body>
</html>

Shugich · February 16, 2010

psywalker, открываем фотошоп и измеряем... Опа... Ширина у каждого блока получается по 48 пикселей, а не по 50...

Justnewone · February 16, 2010

Готово дружище
В IE6 и 7 точно нормально? Расположение в инлайновом элементе без зума блочных - обязано быть чреватым.

psywalker · February 16, 2010

psywalker, открываем фотошоп и измеряем... Опа... Ширина у каждого блока получается по 48 пикселей, а не по 50...

Ну извини, это уже из разряда фантастики, ты уж выбирай, задача состояла именно вместить в родителя, вот тебе и решение соответствующее.

Я проверил везде, вроде бы нормально, протестите и вы.

Great Rash · February 16, 2010

Опа... Ширина у каждого блока получается по 48 пикселей, а не по 50...

Да что вы все с линейкой лазите. Представьте что у вас нет возможности изменять ширину блоков, вот и приходится извращаться.

Shugich · February 16, 2010

> Ну извини, это уже из разряда фантастики, ты уж выбирай, задача состояла именно вместить в родителя, вот тебе и решение соответствующее.

Ну в таком случае ты изменил ширину блоков до 48 пикселей, только через жопу. Проще уж сразу же было прописать ширину...

Настоящий верстальщик не будет придумывать кучу строк кода, вместо того, чтобы изменить одно значение...

psywalker · February 16, 2010

Да что вы все с линейкой лазите. Представьте что у вас нет возможности изменять ширину блоков, вот и приходится извращаться.

Вот и я о томже, задача выполнена или нет?

> Ну извини, это уже из разряда фантастики, ты уж выбирай, задача состояла именно вместить в родителя, вот тебе и решение соответствующее.
Ну в таком случае ты изменил ширину блоков до 48 пикселей, только через жопу. Проще уж сразу же было прописать ширину...
Настоящий верстальщик не будет придумывать кучу строк кода, вместо того, чтобы изменить одно значение...

В том то и дело, что я ничего не изменял. Я лишь следовал задаче, и НЕ проще. Потому что задача именно в том и состоит, чтобы вместить в родителя блоки любой ширины, а не чётко заданной.

Sign In

Небольшая, но очень интересная задачка по верстке.

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

55 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

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