Question

尝试使用相对/绝对定位和浮动

来实现此目的

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

Col2驱动Col1的高度

当我在Col1中的项目上使用绝对pos时，我要么没有得到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

CSS顶部和底部对齐

1 个答案: