html – 使用CSS将DIV与无关DIV的底部对齐(没有父/子关系)

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

A和B的高度根据正在查看的页面而变化,因此我不相信我可以使用填充/边距/任何内容.

因为我是新用户,所以我无法发布图片,所以我将用文字说明.

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/

最佳答案 我明白你要做什么.我建议将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

点赞