Прибить блок в угол

COOLer5 · November 22, 2009

Здравсвуйте. Не могу придумать как сделать следующее:

Т.е. родительский блок. Ширина и высота фиксированная. В этом блоке может находиться произвольно количество текста начиная от 4 символов. Есть второй блок, в правом нижнем углу. Он всегда должен быть в правом нижнем углу и текст должен обтекать его сверху и снизу.

Второй день думаю как сделать. Помогите пожалуйста.

COOLer5 · November 22, 2009

Вот что имею на данный момент:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>

<div style="width: 150px; height: 250px; border: solid 2px;">
Both.
There's nothing stopping you applying both position: absolute and
float to an element so it's "valid". But it's also pointless. 
dsfsdf asdfas ads fsdf dfs sdf s s s s s s s s s s s s s s s s s s s
<div style="height: 20px; width: 20px; border: solid 2px; float: right;">11</div>
</div>

</body>
</html>

Edited November 22, 2009 by COOLer5

psywalker · November 22, 2009

Боюсь нет выхода, даже при таких раскладах будет налезать нижний блок

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>

<div style="width: 150px; border: solid 2px; position: relative;">
Both.
ThereBoth.
There's nothing stopping you applying both position: absolute and
float to an element so it's "valid". But it's also pointless.
dsfsdf asdfaBoth.
There's nothing stopping you applying both position: absolute and
float to an element so it's "valid". But it's also pointless.
dsfsdf asdfas ads fsdf dfs sdf s s s s s s s s s s s s s s s s s s ss ads fsdf dfs sdf s s s s s s s s s s s s s s s s s s s's nothing stopping you applying both position: absolute and
float to an element so it's "valid". But it's also pointless.
dsfsdf asdfas ads fsdf dfs sdf 
<div style="position: absolute; bottom: 0; right: 0; background: red;">
<div style="height: 20px; border: solid 2px; float: right;">11sdgd</div></div>
</div>

</body>
</html>

mishka · November 22, 2009

Боюсь нет выхода, даже при таких раскладах будет налезать нижний блок

А при таких?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style type="text/css">
		.page{
			width:180px;
			height:280px;
			padding:5px;
			border:2px solid #000;
			overflow:hidden;
			text-align:justify;
		}
		.number{
			float:right;
			clear:both;
			width:40px;
			height:40px;
			padding:10px 0 0 10px;
			border-left:2px solid #000;
			border-top:2px solid #000;
			overflow:hidden;
			margin:13px -5px 0 5px;
		}
		.h{
			float:right;
			width:1px;
			height:220px;
		}
	</style>
</head>
<body>
	<div class="page">
		<div class="h"></div>
		<div class="number">11</div>
		Lorem ipsum dolor sit amet consectetuer Morbi wisi at Donec magna. Pede laoreet Donec egestas dis gravida Suspendisse diam natoque non facilisi. Vivamus Integer ante quis semper. Cursus libero mauris lorem. Vivamus Integer ante quis semper. Cursus libero mauris lorem. Vivamus Integer ante quis semper. Cursus libero mauris lorem. Vivamus Integer ante quis semper. Cursus libero mauris lorem.
</div>
</body>
</html>

psywalker · November 22, 2009

Молодец медведь, приходи ещё

p.s. - слушай, а можешь сделать, чтобы высота у контейнера основного не была фикс?

Edited November 22, 2009 by psywalker

mishka · November 22, 2009

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

А зачем ему растягиватся? это же номер страницы. Чтобы по ширине растягивался - просто ширину неуказывать. по высоте тянутся небудет. Да и зачем это?

p.s. - слушай, а можешь сделать, чтобы высота у контейнера основного не была фикс?

Только если джс подключить.

psywalker · November 22, 2009

Только если джс подключить.

Ну так неинтересно, нужно ЦСС-ом бы одним

COOLer5 · November 22, 2009

Я вас люблю! Спасибо большое! Эта штука меня без сна почти на двое суток оставила. Ура!

mishka · November 22, 2009

можна сделать так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style type="text/css">
		.page{
			width:200px;
			height:275px;
			padding:5px;
			border:2px solid #000;
			overflow:hidden;
			text-align:justify;
		}
		.number{
			float:right;
			clear:both;
			width:40px;
			height:40px;
			padding:10px 0 0 10px;
			border-left:2px solid #000;
			border-top:2px solid #000;
			overflow:hidden;
			margin:13px -5px 0 5px;
		}
		.h{
			float:right;
			width:1px;
			height:100%;
			margin:0 -1px -60px 0;
		}
	</style>
</head>
<body>
	<div class="page">
		<div class="h"></div>
		<div class="number">11</div>
		Lorem ipsum dolor sit amet consectetuer Morbi wisi at Donec magna. Pede laoreet Donec egestas dis gravida Suspendisse diam natoque non facilisi. Vivamus Integer ante quis semper. Cursus libero mauris lorem. Vivamus Integer ante quis semper. Cursus libero mauris lorem. Vivamus Integer ante quis semper. Cursus libero mauris lorem. Vivamus Integer ante quis semper.
	</div>
</body>
</html>

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

Но ТС ясно сказал что ширина высота фиксированны. И это правильно, так как дизайн сделан под страницу книги, значит должны быть пропорции.

psywalker · November 22, 2009

Я вас люблю! Спасибо большое! Эта штука меня без сна почти на двое суток оставила. Ура!

А Мишка любит мёд, так что вы его угостите, таким образом выразите свою благодарность, а он вам ещё чё нить сбацает

Clayton · November 22, 2009

гг) Крута. Я бы прибил его позиционированием в угол, а потом бы думал *как сделать что б текст млин не заезжал туда*

COOLer5 · November 22, 2009

А Мишка любит мёд, так что вы его угостите, таким образом выразите свою благодарность, а он вам ещё чё нить сбацает

Я бы с удовольствием, но как-то далековато он от меня находится

psywalker · November 22, 2009

Я бы с удовольствием, но как-то далековато он от меня находится

А вы с ним в ЛС спишитесь, заодно и узнаете, может в соседнем доме

m0ntag · December 5, 2009

Проблема наверное смешная, однако не знаю как ее решить, может подскажет кто?

В общем есть 3 дива, третий див обтекает втрой див и стоит с ним на одном уровне , все замечательно в

опере и хроме, но в эксплорере третий див валится под второй, как

пофиксить?

Вот примерный код.

<html>

<head>

<body>

<div style="background:#FA9f1D; width:800px;" >страница<br>страница<br>

<div style="float:left; background:#ffffff; width:140px;">баннер<br>баннер<br>баннер

</div>

контент<br>контент<br>контент<br>контент </div>

</div>

</body>

</html>

Edited December 5, 2009 by m0ntag

Sign In

Прибить блок в угол

Question

Link to comment

Share on other sites

13 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

Join the conversation

Обсуждения

Important Information