вертикальное выравнивание блоков

Toxin_G · August 11, 2011

есть

<div style="float:right;">
       это должно быть сверху
      <div id="bottom_div">
           содержимое этого блока снизу
      </div>
</div>

нужно содержимое первого diva выравнивать сверху второй должен прилипать всегда снизу первого блока, все блоки неизвестной высоты.

_________________________________________________________________

несколько дней пытаюсь решить но ничего не могу придумать, если кто сможеть решить хотяб на таблицах буду благодарен

PS: xhtm 1.1

Edited August 11, 2011 by Toxin_G

Vlad · August 11, 2011

Задайте родителю position: relative, а блокам poosition: absolute. Тогда для верхнего блока будет ещё top: 0, а для нижнего bottom: 0.

Toxin_G · August 12, 2011

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

<table border=1 width=100%>
<tr>
<td>
dddddddd<br />
dddddddd<br />
dddddddd<br />
dddddddd<br />
dddddddd<br />
dddddddd<br />
dddddddd<br />
dddddddd<br />
dddddddd<br />
</td>
<td>
ddddddddss
</td>
<td style="position: relative;">
dddddddddddddd
<div style="position: absolute; bottom: 0;">
ttttttttttttt
</div>
</td>
</tr>
</table>

psywalker · August 12, 2011

В ячейках таблицы не пашет абсолют. Делай обёртку див, релатив. В него уже засовывай абсолюты.

Toxin_G · August 12, 2011

вот это работает в хроме но в опере теперь текст накладается

<table border=1 width=100% height=100%>
<tr>
<td>
dddddddd<br />
dddddddd<br />
dddddddd<br />
dddddddd<br />
dddddddd<br />
dddddddd<br />
dddddddd<br />
dddddddd<br />
dddddddd<br />
</td>
<td>
ddddddddss
</td>
<td style="height:100%;">
<div style="position: relative; height:100%;border:1px solid #f00;">
dddddddddddddd
<div style="position: absolute; bottom: 0;">
ttttttttttttt
</div>
</div>
</td>
</tr>
</table>

gart · August 12, 2011

есть
<div style="float:right;">
       это должно быть сверху
      <div id="bottom_div">
           содержимое этого блока снизу
      </div>
</div>
нужно содержимое первого diva выравнивать сверху второй должен прилипать всегда снизу первого блока, все блоки неизвестной высоты.
_________________________________________________________________
несколько дней пытаюсь решить но ничего не могу придумать, если кто сможеть решить хотяб на таблицах буду благодарен
PS: xhtm 1.1

<div style="float:right;">это должно быть сверху</div>
      <div style="clear:right;">
           содержимое этого блока снизу
      </div>

или clear:both - всегда будет снизу

Toxin_G · August 12, 2011

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


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>administrator</title>


</head>
<body>
<table cellpadding="0" cellspacing="0" class="table">
  <tr>

      <div style="display: table-cell;vertical-align:top; padding-left:10px; height: 100%;">
            <div style="border: 1px #ccc solid; padding: 5px; margin-top: 1px; word-wrap: break-word">
        <div style="float:left;">
                    <img src="/fw/p1.png" width="80" height="80" alt="stas" /><br />
                    <span class="indbox_text_color">24 июля 2011<br />
          (14:53:12)</span><br />
          <span class="indbox_text_color">От:</span>
                    <a href="/fw/index.php/profile/1/">administrator</a>
                  </div>

        <div style="float:right;" style="height:100%; width: 50px; border:1px solid #f00;" id="right_5" >

          <div  id="id_5"  style="padding:15px; text-align: center; border:1px solid #f00;">

          <a href="/fw/index.php/profile/delete_message/5"><img src="/fw/files/icons/design/delete.png" width="16" height="16" style=";"  /></a></div>
<!-- этот блок должен всегда прилипать снизу -->
<div  id="id_5"  style="padding:15px; text-align: center; border:1px solid #f00;">

          <a href="/fw/index.php/profile/delete_message/5"><img src="/fw/files/icons/design/delete.png" width="16" height="16" style=";"  /></a></div>
<!-- конец блока -->
          </div>


        <div style="overflow:hidden; zoom:1;  padding: 5px;"> 4444444444444444444444444<br />
                  </div>
        <div style="clear:both"></div>
      </div>
          </div>

  </div>

  </div>

</td>
	  </tr>
	  </table>
</body>
</html>

Edited August 12, 2011 by Toxin_G

gart · August 13, 2011

снизу страницы, или снизу всех остальных блоков?

Toxin_G · August 13, 2011

снизу блока в который он вложен

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

(на картинке второй квадрат(нижний) должен находится справа снизу)

gart · August 13, 2011

(на картинке второй квадрат(нижний) должен находится справа снизу)


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>administrator</title>


</head>
<body>
<table cellpadding="0" cellspacing="0" class="table">
  <tr>

      <div style="display: table-cell;vertical-align:top; padding-left:10px; height: 100%;">
            <div style="border: 1px #ccc solid; padding: 5px; margin-top: 1px; word-wrap: break-word">
        <div style="float:left;">
                    <img src="/fw/p1.png" width="80" height="80" alt="stas" /><br />
                    <span class="indbox_text_color">24 июля 2011<br />
          (14:53:12)</span><br />
          <span class="indbox_text_color">От:</span>
                    <a href="/fw/index.php/profile/1/">administrator</a>
                  </div>

        <div style="float:right;" style="height:100%; width: 50px; border:1px solid #f00;" id="right_5" >

          <div  id="id_5"  style="padding:15px; text-align: center; border:1px solid #f00;">

          <a href="/fw/index.php/profile/delete_message/5"><img src="/fw/files/icons/design/delete.png" width="16" height="16" style=";"  /></a></div>
<!-- этот блок должен всегда прилипать снизу -->
<!-- конец блока -->

        </div>


        <div style="overflow:hidden; zoom:1;  padding: 5px;"> 4444444444444444444444444<br />
                  </div>
        <div style="clear:both"></div>
        <div  id="id_51"  style="padding:15px; text-align: center; border:1px solid #f00;float:right;margin-top: -31px;">

          <a href="/fw/index.php/profile/delete_message/5"><img src="/fw/files/icons/design/delete.png" width="16" height="16" style=";"  /></a></div>
      </div>
          </div>

  </div>

  </div>

</td>
          </tr>
          </table>
</body>
</html>

я принцип показал - вообще код бы неплохо подчистить, что бы кроссбраузерно стало.

и нельзя делать в одном документе одинаковые id.

Edited August 13, 2011 by gart

Toxin_G · August 13, 2011

огромное спасиба всем, отдельная большая благодарность gart, что не прошел мимо а помог решить задачу. теперь насчет кода, что посоветуете изменить?

gart · August 13, 2011

огромное спасиба всем, отдельная большая благодарность gart, что не прошел мимо а помог решить задачу. теперь насчет кода, что посоветуете изменить?

display: table-cell;vertical-align:top; вот вместо этого лучше сделать нормальный блочный элемент.

Sign In

вертикальное выравнивание блоков

Question

Link to comment

Share on other sites

11 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

Join the conversation

Обсуждения

Important Information