DIVы с параметром адщфе и динамическое изменение размеров одного элемента

Master of Code · September 2, 2008

Друзья, в общем не знаю можно ли сделать что нибудь с этим или нет но примерно опишу что нужно. В общем есть скрипт, скрипт выводит элементы на экран в контейнере DIV, понятное дело что каждый новый ДИВ переносится на новую строку. Я делаю float:left; тем самым добиваясь размещения на одной строке и переноса на следующую всех не поместившихся. Все бы было отлично если бы не одно НО. В каждом контекнере есть активные элементы, по просту добавляющие элементы формы, тем самым раздвикая мой контейнер (только один!) по высоте, отсюда получается что те контейнеры что были внизу, на второй строчке переносятся дальше, начиная с того, чья высота была изменена.

вот код гогда все элементы постоянны по размерам:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
</head>

<body>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>

</body>
</html>

а вот если например 4-й элемент имеет большую высоту чем остальные

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
</head>

<body>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:180px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>

</body>
</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
</head>

<body>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:180px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="clear:both"></div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>
<div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div>

</body>
</html>

заранее спасибо

klierik · September 2, 2008

ну коль используете JS, в таком случае сделайте на нем проверку на высоту блоков,

и равняйте высоту по самому высокому блоку всех остальных.

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

Master of Code · September 3, 2008

ну коль используете JS, в таком случае сделайте на нем проверку на высоту блоков,
и равняйте высоту по самому высокому блоку всех остальных.
иначе, Вы врятли чего добъетесь, так как если один блок выпадает из общего ряда по высоте, все остальные обтекают именно его.

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

Sign In

DIVы с параметром адщфе и динамическое изменение размеров одного элемента

Question

Master of Code

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Master of Code

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information