CSS верх и низ выровнены - PullRequest
Новая
       23

CSS верх и низ выровнены

1 голос
/ 24 января 2011

Попытка достичь этого с относительным / абсолютным позиционированием и плавающим 

                 Col1                         Col2
------------------------------------------------------------
-  H1 Content aligned to top          - Some Content       -
-                                     -                    -
-                                     -                    -
-                                     -                    -
-                                     -                    -
-                                     -                    -
-                                     -                    -
- Some other content aligned to bot   -                    -
------------------------------------------------------------

Col2 управляет высотой Col1

Я либо не получаю высоту в столбце col1, либо столбец col2 перекрывает столбец Col1, когда я использую абсолютное положение для элементов в столбце Col1

Любая помощь?

Спасибо

1 Ответ

0 голосов
/ 07 марта 2011

Лучшее решение, которое у меня есть, это контейнер с фиксированной высотой: 

<div id="news">
  <div class="news-panel" id="left-news">
    <h2>Side Header</h2>
  </div>
  <div id="footer-news">
    <h2>Side Footer</h2>
  </div>
  <div class="news-panel" id="right-news">
    Main Content
  </div>
</div>

div#news { margin: 0px auto; position: relative; width: 895px; height: 208px; border: 1px solid gray; }
div#news div.news-panel { position: absolute; top: 0; }
div#news div#footer-news { position: absolute; bottom: 0; }
div#news div#left-news { left: 0; margin-right: 60px; width: 390px; border: 1px solid red; }
div#news div#right-news { width: 437px; right: 0px; }

вроде работает, хотя я надеялся не указывать высоту - здесь она работает (см. Раздел «Что происходит»): AgileApps

...