CSS 顶部和底部对齐

Question

尝试通过相对/绝对定位和 float 来实现这一点

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

Col2 驱动 Col1 的高度

当我对 Col1 中的元素使用绝对位置时，我要么得不到 col1 中的高度，要么 col2 最终与 Col1 重叠

有什么帮助吗？

谢谢

Answer 1

我的最佳解决方案是使用固定高度的容器:

<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