Question

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

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

由于我是新用户，因此我无法发布图片，因此我将用文字进行说明。

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

我是CSS newb的重要时刻，我正在使用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

Answer 2

当然，这就是vertical-align属性的用途。

HTML：

<div id="container">
    <div id="a">

    </div><div id="b">

    </div>
</div>

请注意，</div><div id="b">正在触动。因为这两个元素是inline-block个元素，所以标记中的任何空格都会在演示文稿中产生空间。

CSS：

#container > div {
    vertical-align: bottom;
    width: 100px;
    display: inline-block; }
#a { 
    background: red;
    height: 300px; }
#b { 
    background: blue;
    height: 100px; }

请参阅：http://jsfiddle.net/Wexcode/pbdHj/

Answer 3

想到的基本策略是：

将两者包装在容器div中
声明＆＃39;职位：亲属＆＃39;在容器上触发＆＃34;容器＆＃34; div上的财产（无法找到这种副作用的真实姓名）
绝对放置侧边栏，使用＆＃34;底部：0＆＃34;

使用CSS将DIV与无关DIV的底部对齐（无父/子关系）

3 个答案: