CSS 顶部和底部对齐

发布于 2024-10-13 16:27:18 字数 836 浏览 4 评论 0原文

来实现此目的，

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

尝试通过相对/绝对定位和浮动Col2 驱动 Col1 的高度

当我在 Col1 内的项目上使用绝对 pos 时，我要么没有获得 col1 的高度，要么 col2 最终与 Col1 重叠。

有帮助吗？

谢谢

原文

Trying to achieve this with relative/absolute positioning and floating

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

Col2 drives the height of Col1

I either don't get the height in col1 or col2 ends up overlapping Col1 when i use absolute pos on the items within Col1

Any help?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦里°也失望 2024-10-20 16:27:18

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

<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

Best solution I have is with a fixed-height container:

<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; }

sort of works although I'd hoped not to specify a height - here it is working (see the "What's happening" section): AgileApps

回复收藏 0 原文

~没有更多了~