Проблемы с clear

beginner · May 27, 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">

<head>
  <title></title>

<style type="text/css">
* {
  margin: 0; padding: 0;
}
body {
  margin: 5px; padding: 0;
}
div.left {
  float: left; width: 250px;
}
div.left p {
  background-color: #FFCC66;
}
div.right {
  margin-left: 250px;
}
div.right p {
  background-color: #FF9966;
}
</style>
</head>

<body>
<div class="left">
 <p>left</p>
 <p>left</p>
</div>
<div class="right">
 <p style="float: left;">right</p>
 <p style="clear: left;">right</p>
</div>
</body>

</html>

тег <p> в столбце div.right сносится ниже div.left из-за стиля clear: left , посоветуйте пожалуйста как с этим бороться?

Edited May 27, 2010 by beginner

Searcher · May 27, 2010

Хм, не понятно, что нужно получить... С чем бороться то? Удалите clear: left; и все

verstun · May 27, 2010

попробуй так

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

<head>

* {

margin: 0; padding: 0;

}

body {

margin: 5px; padding: 0;

}

div.left {

float: left; width: 250px;

}

div.left p {

background-color: #FFCC66;

}

div.right {

margin-left: 250px;

}

div.right p {

background-color: #FF9966;

}

.clear { clear:both;}

</style>

</head>

<body>

</div>

<p>right</p>

</div>

</body>

</html>

Searcher · May 27, 2010

verstun, вкладывайте код в спецтэги [ code ].....[ /code ]. Для этого кнопочка есть над полем ввода.

beginner · May 28, 2010

так конечно можно сделать, но если у меня в левом или в правом блоке будет clear: left, то все будет сноситься как я и показал в коде, меня интересует можно ли это как то обойти, либо есть ли какой то прием чтобы сноса блоков не было?

Edited May 28, 2010 by beginner

Searcher · May 28, 2010

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

Вариантов тут тьма. Ну например самый поганенький:

<body>
<div class="left">
<p>left</p>
<p>left</p>
</div>
<div class="right">
<p style="float: left;">right</p><br>
<p style="float: left;">right</p>
</div>
</body>

Вариант 2:

<body>
<div class="left">
<p>left</p>
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p style="float: left;">right</p>
</div>
</body>

Вариант 3:

<body>
<div class="left">
<p>left</p>
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</body>

Только тут, да и в других вар-тах тоже, вместо того что было в стиле div.right надо вот это прописать:

div.right {
  overflow:hidden;
}

Ну и еще можно напридумывать

beginner · May 28, 2010

Огромное спасибо за помощь, очень помогли, тема закрыта!

Edited May 28, 2010 by beginner

Sign In

Проблемы с clear

Question

beginner

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

verstun

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

beginner

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

beginner

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information