html - 使用 CSS 将 DIV 对齐到不相关的 DIV 的底部(无父/子关系)

Question

如果 DIV 没有父子关系，是否可以将 B 的底部与 A 的底部对齐？

A 和 B 的高度根据正在查看的页面而变化，所以我不相信我可以用 padding/margins/whatever 来做到这一点。

由于我是这里的新用户，我不能发布图片，所以我会用文字说明。

What I have:             What I want:
[   nav bar   ]          [   nav bar   ]
--------- -----          ---------
|       | | B |          |       |
|   A   | -----          |   A   |
|       |                |       | -----
|       |                |       | | B |
---------                --------- -----
     ----------               ----------
     | content|               | content|

我是个 CSS 新手，我正在研究 Wordpress 以让它做我想做的事。任何帮助将不胜感激。

谢谢!

我正在处理的页面在这里:

http://rachelhappen.com/the-charlie-baker-sneaker/

Answer 1

我明白你想做什么。我的建议是在相对位置的 A 和 B 周围放置一个父 div，并将 B div 绝对定位到该容器的底部。这样，它就会一直粘在底部。

我测试了以下代码，它看起来很完美。附上它的截图。

<style type="text/css">

* { margin:0; padding:0; }
.container { position:relative; width:600px; height:400px; }
.container .a { background:red; position:absolute; height:400px; width:400px; left:0; }
.container .b { background:green; position:absolute; height:200px; width:200px; right:0; bottom:0; }
.cl { clear:both; }

</style>

<div class="container">
     <div class="a">a</div>
     <div class="b">b</div>
</div>

http://i.stack.imgur.com/6unHw.png