float: left

Veseloff · February 14, 2011

http://borber.ru/htmlbook/template5.html

Вот тут обычный вариант «двухколоночного макета». Меню идёт с float: left. Далее нам нужно вставить много (неизвестно сколько именно) блоков 100×100, которые бы тоже бы были с float: left; А потом ещё раз такие же блоки. Само собой, надпись «Вторые блоки» тоже попадает под раздачу. Что делать, думаю я про себя. Вставляю пустой блок с clear: left, который до кучи хватает ещё и колонку с меню.

http://borber.ru/htmlbook/template6.html

Как бы вот так сделать, чтобы и left «почистить» и меню не захватывать?

psywalker · February 14, 2011

Лови дружище

<!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;}
	#img { float: left; width: 300px; height: 600px; background: red;}
	#wrap { overflow: hidden; zoom:1;}
	.float { float: left; width: 100px; height: 100px; background: #000; margin: 2px;}
</style>
</head>

<body>
<div id="img"></div>
<div id="wrap">
	<div class="float"></div>
	<div class="float"></div>
	<div class="float"></div>
	<div class="float"></div>
	<div style="clear: both;"></div>
	<div class="float"></div>
	<div class="float"></div>
	<div class="float"></div>
	<div class="float"></div>
</div>

</body>
</html>

Great Rash · February 14, 2011

<body>
	<div id="overall">
		<div id="menu">
			<a href="/">Link</a><br>
			<a href="/">Link</a><br>
			<a href="/">Link</a><br>
			<a href="/">Link</a><br>
			<a href="/">Link</a><br>
			<a href="/">Link</a><br>
			<a href="/">Link</a><br>
			<a href="/">Link</a><br>
			<a href="/">Link</a><br>
			<a href="/">Link</a><br>
			<a href="/">Link</a><br>
		</div>
		<div style="overflow: hidden; padding: 0 20px;">
			<h2>Первые блоки</h2>
			<div class="bl">Test</div>
			<div class="bl">Test</div>
			<div class="bl">Test</div>
			<div class="bl">Test</div>
			<div class="bl">Test</div>
			<div class="bl">Test</div>
			<div class="bl">Test</div>
			<div class="bl">Test</div>

			<h2 style="clear: left;">Вторые блоки</h2>
			<div class="bl">Test</div>
			<div class="bl">Test</div>
			<div class="bl">Test</div>
			<div class="bl">Test</div>
			<div class="bl">Test</div>
			<div class="bl">Test</div>
			<div class="bl">Test</div>
			<div class="bl">Test</div>
		</div>

		<br clear="all" />
	</div>
</body>

Selen · February 14, 2011

Вот еще один вариант который я видел в сети.

Поместить блоки с со стилем float: left или float: right в контейнер со следующим стилем:

.clear {

width: 100%;

overflow: hidden;

}

psywalker · February 14, 2011

Selen said:
Вот еще один вариант который я видел в сети.
Поместить блоки с со стилем float: left или float: right в контейнер со следующим стилем:
.clear {
width: 100%;
overflow: hidden;
}

Приведи тестовую страницу.

Selen · February 14, 2011

psywalker said:
Приведи тестовую страницу.

Проверил. Вариант оказался рабочим как замена clear:both; В данном случае такой вариант не прокатит!

Veseloff · February 14, 2011

Спасибо, други! Буду разбираться... И чего говорят, что программировать сложнее, чем верстать? По мне так наоборот.

Sign In

float: left

Question

Veseloff

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Selen

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Selen

Link to comment

Share on other sites

Veseloff

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information