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

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;

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

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

psywalker · February 17, 2010

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

Дело в том, что я вначале уже предлагал такой вариант с шириной 156пк, даже без НЕкроссбраузерного :after;, то он не подошёл, как бы нечестный

http://forum.htmlbook.ru/index.php?s=&...st&p=139360

mishka · February 17, 2010

Вопрос второй:
Если всем трем блокам (a, b и c) установить float: left;, а родителю (main-box) установить ширину в 156 пикселей, то блоки внутрь влезут, но блок main-box схлопнется.
Внимание вопрос: как при помощи CSS сделать так, чтобы блок main-box тянулся по высоте соответвтсенно контенту, т.е. его высота стала равной высоте блоков a, b или c?
Решение должно быть кроссбраузерным, нельзя использовать overflow: hidden; и пустой блок с clear: both;

Именно это я расценил как второе задание.

даже без НЕкроссбраузерного :after;

:lol: Макс, негони, это имхо самый правильный способ очистки потока. Неработает только в ие6-7. Но я же говорил что нужно для ие6-7...

Great Rash · February 17, 2010

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

ИМХО плох тот верстальщик, который не мечтает стать программистом.

psywalker, mishka2, из вас отличная б команда получилась

mishka · February 17, 2010

psywalker, mishka2, из вас отличная б команда получилась

Ну без тебя так себе... 4 с минусом...

А с тобой на 5 с плюсом

psywalker · February 17, 2010

Да я давно говорил, нам команду надо замутить

Sign In

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

Question

Great Rash

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

psywalker

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information