невыравниваемые блоки в div'ах

Статус
В этой теме нельзя размещать новые ответы.
SeeJey

SeeJey

Мой дом здесь!
Регистрация
23 Мар 2006
Сообщения
825
Реакции
261
:)
давно чото тем не создавал. даже непривычно))
дело вот в чем:
имеется верстка:
PHP: 
<div id="stolb_2">
  <div class="position">
    <p>dfgfdgfd</p>
    <p>gdgdgdg</p>
  </div>
  <div class="position">vfgergreg</div>
  <div class="position">
    <p>greg</p>
    <p>freg</p>
  </div>
  <div class="position"></div><div class="position"></div></div>
PHP: 
div#stolb_2{float:right;width:504px;}
div.position{width:215px;float:left;border:1px solid #4d4d4d;margin-left:9px;padding:13px;margin-bottom:10px;}

в итоге получаем:
0f780b40962a.png


цель: сделать так чтобы если высота блоков разная - они не выравнивались таким образом относительно друг друга, а было б так:
1b2fdeb9098a.png


у кого какие мысли? :)
пасибо
 
можно попробовать в левые и правые дивы разделить и запихтуть в дивы
HTML: 
<style>
div#stolb_2{float:right;width:554px;}
div.position{width:215px;float:left;border:1px solid #4d4d4d;margin-left:9px;padding:13px;margin-bottom:10px;}  
div.position2{width:215px;float:left;border:1px dotted #4d4d4d;margin-left:9px;padding:13px;margin-bottom:10px;}  
</style>
<div id="stolb_2">
  <div class="position2">
  <div class="position">
    <p>dfgfdgfd</p>
    <p>gdgdgdg</p>
  </div>
    <div class="position"></div>
  </div>
  
   <div class="position2">
  <div class="position">vfgergreg</div>
  <div class="position">
    <p>greg</p>
    <p>freg</p>
  </div>
<div class="position"></div></div>  
</div>
 
а, сразу забыл сказать(( такой вариант исключается к сожалению(
но спасибо.
у кого какие другие мысли?)
 
Нужно задать для блоков height, как вариант min-height.
 
вообще тоже вариант конечно... но у меня в этих блоках контент генерится который в разных случаях разной длинны, и задавать мин-хайт не оч корректно( спасибо.
пришлось немного переделать блоки, че поделать...
если у кого есть еще какое-нить решение - пишите, буду очень благодарен.
спасибо.
 
Как немного левый вариант - сделать положение абсолютным и выравнить с помощью js.
 
можно использовать для этого JavaScript, как показано Для просмотра ссылки Войди или Зарегистрируйся. Но, ИМХО, я бы не стал использовать из-за этого Java. Лучше бы подумал как решить с добавлением других div.
 
Пол дня сегодня искал решение этой проблемы.
И вот, к чему я пришёл, читайте в этой статье:
Для просмотра ссылки Войди или Зарегистрируйся
 
Acden написал(а):
Пол дня сегодня искал решение этой проблемы.
И вот, к чему я пришёл, читайте в этой статье:
Для просмотра ссылки Войди или Зарегистрируйся
Нажмите для раскрытия...
По моему задача стоит не выравнить слои- если в левом много текста а в правом мало, то получится кособоко- а сделать так, чтобы слои вставали без зазора, при этом не группируя их и не изменяя размер. Хотя всё зависит от ТЗ.
Лично я выхода не вижу:nezn:, только js.
 
SeeJey написал(а):
:)
цель: сделать так чтобы если высота блоков разная - они не выравнивались таким образом относительно друг друга, а было б так:
1b2fdeb9098a.png
Нажмите для раскрытия...

Интересно, что имменно так начнёт показывать firefox, если изменить float на right в position

Код: 
div.position{width:215px;[B][COLOR=Red]float:right[/COLOR][/B];border:1px solid #4d4d4d;margin-left:9px;padding:13px;margin-bottom:10px;}
но если добавить хоть один пиксель в padding или ещё куда, то появляются пробелы между блоками как в float:left. Это наверное баг в firefox, в других браузерах нормально всё.


Решение вроде для всех браузеров, надо поочерёдно менять выравнивание для каждого блока:

Код: 
<!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>
<style type="text/css">
<!--
div#stolb_2{
    float:right;
    width:504px;
    border:1px solid #FF0000;
}
div.position{
    width:215px;
    border:1px solid #4d4d4d;
    margin-left:9px;
    padding: 13px;
    margin-bottom:10px;
    float:left;
} 

div.right{
    float:right;
}

-->
</style>
</head>

<body>


<div id="stolb_2">

  <div class="position">
    <p>1dfgfdgfd</p>
    <p>gdgdgdg</p>
  </div>
  
  <div class="position right">2vfgergreg<br /><br /><br /><br /><br /><br /><br /><br /></div>

  <div class="position">
    <p>3greg</p>
    <p>freg<br /><br /></p>
  </div>
  



  <div class="position right">4 dsfsdfsdf sdf sdf sf sdf sfd sdf sdf sdf sd fsd fsdf sd fsd fsdfsdf sd fsdfsd fsdfsd fsd<br /></div>
  
  <div class="position">5</div>
  
  <div class="position right">6df ds fsdf dsf dsf dsf ddsf sdfsd fsd</div>
</div>  
  
  
  
</body>
</html>
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху