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

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

> задача выполнена или нет?

нет конечно :lol:

Great Rash · February 16, 2010

psywalker - мужыг! :lol:

Однако повторюсь, что не уверен, что по условию можно использовать хаки. Но без них, видимо, никак...

Shugich · February 16, 2010

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

В итоге все равно получаются блоки с четко заданной шириной...

Justnewone · February 16, 2010

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

Хорошо что Вы туда не попали ))) Вот мое мнение, не расстраивайтесь. Нету четкости, к тому же, для выяснения уровня знаний эта задача беспомощна, потому что она покажет не реальный опыт, а опыт решения задач ректально, на тему "а давайте узнаем, умеет ли этот парень работать так же через задницу как и мы, найдем ли общий язык?".

psywalker · February 16, 2010

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

НЕТ же, ты опять ошибаешься, ты не улавливаешь суть. Блоки не с фиксированной шириной, а ОНИ САМИ её подстроили под родителя. Пойми эту тонкость.

psywalker - мужыг!
Однако повторюсь, что не уверен, что по условию можно использовать хаки. Но без них, видимо, никак...

Да, они очень помогли в основных браузерах. Но думаю ещё повозится, может удастся без них справится

Shugich · February 16, 2010

> Блоки не с фиксированной шириной, а ОНИ САМИ её подстроили под родителя. Пойми эту тонкость.

Да эту тонкость я понял... Но ширина нужна 50 пикселей...

Предположим нужно вставить туда картинку 50х50 пикселей, тогда все. карачун церетелли.

psywalker · February 16, 2010

> Блоки не с фиксированной шириной, а ОНИ САМИ её подстроили под родителя. Пойми эту тонкость.
Да эту тонкость я понял... Но ширина нужна 50 пикселей...
Предположим нужно вставить туда картинку 50х50 пикселей, тогда все. карачун церетелли.

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

Great Rash · February 16, 2010

Хорошо что Вы туда не попали ))) Вот мое мнение, не расстраивайтесь. Нету четкости, к тому же, для выяснения уровня знаний эта задача беспомощна, потому что она покажет не реальный опыт, а опыт решения задач ректально, на тему "а давайте узнаем, умеет ли этот парень работать так же через задницу как и мы, найдем ли общий язык?".

:lol: да, может вы и правы...

Shugich · February 16, 2010

А спросить ответ у тех, кто тебе задавал вопросты ты можешь?

Просто как бы решения есть но хз что нужно было... Как говорили выше ТЗ неккоректное...

Great Rash · February 16, 2010

А спросить ответ у тех, кто тебе задавал вопросты ты можешь?

Вот если мне вдруг перезвонят и я попаду на второй тур, то обязательно поинтересуюсь. Ибо я не меньше вашего думаю, что это жесткое извращение.

psywalker · February 16, 2010

Да, ответ интересно было бы узнать, явно.

Shugich · February 16, 2010

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

Ну если не перезвонят, то все равно перезвони и спроси...

Кстати, а ты сам так ничего и не ответил на собеседовании?

Great Rash · February 16, 2010

Я на собеседовании выдал только идею про инлайн-блоки, и отрицательные маргины. Про box-sizing я естественно не знал...

Про разруливание схлопывающегося родителя я вообще не знал, что ответить ибо привык это при помощи overflow: hidden; решать...

В общем налажал я :lol:

psywalker · February 16, 2010

Я на собеседовании выдал только идею про инлайн-блоки, и отрицательные маргины. Про box-sizing я естественно не знал...
Про разруливание схлопывающегося родителя я вообще не знал, что ответить ибо привык это при помощи overflow: hidden; решать...
В общем налажал я

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

aTei · February 16, 2010

Считаю не правильным давать задачи, с которыми не столкнешься в реальной жизни.

Они искали верстальщика, но собеседование проводили в поисках того, кто бы им решал несуществующие задачи.

Это как "ищу профессионала программиста на php без завышенной самооценки. Доскональное знание всех популярных фреймворков и CMS обязательно. Оплата почасовая: 1$/час".

Ну ересь, ясно же.

psywalker · February 16, 2010

Считаю не правильным давать задачи, с которыми не столкнешься в реальной жизни.
Они искали верстальщика, но собеседование проводили в поисках того, кто бы им решал несуществующие задачи.
Это как "ищу профессионала программиста на php без завышенной самооценки. Доскональное знание всех популярных фреймворков и CMS обязательно. Оплата почасовая: 1$/час".
Ну ересь, ясно же.

А мне нравятся задачи подобного рода и вообще задачи, готов сутками напролёт сидеть и решать :lol:

Кстати а причина тому, это то, что например из неё я подчерпнул идею

WalkMan · February 16, 2010

Не нашел в теме самого главного

а куда такое собеседование? :lol:

psywalker супер!

Если вы заметили, то у блоков есть бордер и, следовательно, их ширина не 50 пикселей, а 52.

имхо третьему решению тут не быть

mishka · February 16, 2010

второй вариант вообще не проблема.

Я уже писал пост в теме про очистку потока.

Для ие6-7 нужен хаслаяут. Так как ширина указанна, то проблем нет. А для остальных - after.

вот с первым... бордербоксы ненравятся, а как без них.. немогу придумать.

Во! придумал, конечно подсматривая в решение Макса :lol: . Так как решение для нормальных браузеров придумал сходу, а для ие6-7, без Макса наверное не додумался бы.

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;
			border: 1px solid;
			display:table;
		}
		.a, .b, .c {
			width: 50px;
			height: 50px;
			border: 1px solid;
			display:table-cell;
		}
		* html .main-box{
			display:inline;
		}
		* html .a,
		* html .b,
		* html .c{
			display:inline;
			zoom:1;
		}
		*+html .main-box{
			display:inline;
		}
		*+html .a,
		*+html .b,
		*+html .c{
			display:inline;
			zoom:1;
		}
		.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>

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: 156px;
			border: 1px solid;
		}
		.main-box:after{
			content:"";
			display:block;
			clear:both;
		}
		.a, .b, .c {
			width: 50px;
			height: 50px;
			border: 1px solid;
			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>

Edited February 16, 2010 by mishka2

psywalker · February 17, 2010

Медведь смотри, первое решение нормал, а второе нечестное, так как ты ставишь ширину контейнеру 156пк, а она по умолчанию должна быть 150пк.

А так спасиб за ещё один вариант.

Justnewone · February 17, 2010

Вот ведь... :after, постоянно сам пользуюсь, какой же я дурень, совсем упустил =)))

Great Rash · February 17, 2010

Не нашел в теме самого главного
а куда такое собеседование?

Вот я ща скажу куда, а вы уже зная ответы на все вопросы возьмете и устроитесь туда вместо меня :lol:

Ладно, я не жадный - РБК. http://www.rbc.ru/ - главная у них, кстати, отстойная...код ужасает и доктайпа нет (а на собеседовании они меня задолбали вопросами про W3C и доктайпы)

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

psywalker · February 17, 2010

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

Согласен, там вопросы задают прямо в лоб, и нет времени даже подумать. :lol:

Кстати а какой там график намечался и зарплата?

Great Rash · February 17, 2010

Кстати а какой там график намечался и зарплата?

Хе-хе, 40k и с 9:00 до 18:00 (или с 10:00 до 19:00 по выбору). Требования - верстка и яваскрипт.

UPD: чет я ща подумал, что теперь я могу претендовать еще и на должность в отделе кадров :lol:

psywalker · February 17, 2010

Хе-хе, 40k и с 9:00 до 18:00 (или с 10:00 до 19:00 по выбору). Требования - верстка и яваскрипт.
UPD: чет я ща подумал, что теперь я могу претендовать еще и на должность в отделе кадров

Ааа, ну походу нужно было на 5+ владеть и вёрсткой и JS, да?

Неее, тебе лучше всёж программистом заделаться

mishka · February 17, 2010

Медведь смотри, первое решение нормал, а второе нечестное, так как ты ставишь ширину контейнеру 156пк, а она по умолчанию должна быть 150пк.
А так спасиб за ещё один вариант.

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

Кстати для первого варианта желательно еще указать border-collapse:collapse.

Edited February 17, 2010 by mishka2

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