使用CSS将一个DIV对齐到另一个没有父子关系的DIV的底部

Question

使用CSS将一个DIV对齐到另一个没有父子关系的DIV的底部

5

如果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/

- amphibious

3个回答

1

当然，这就是 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/

- Wex

太棒了，除了样式ID的部分需要改进 ;) - wwwroth

@PhillipJamesRoth - 我不明白你的意思，样式化ID没有任何问题。http://www.w3.org/TR/CSS2/selector.html#id-selectors - Wex

我不确定如何在WordPress文章中创建容器DIV。这是我正在处理的页面。感谢您的建议...http://rachelhappen.com/the-charlie-baker-sneaker/ - amphibious

你能编辑标记吗？你不需要添加容器，因为你有一个清除的 div，但是我不知道你将如何以一种不会破坏你网站上其他内容的方式添加这些样式声明。 - Wex

这个标记是由WordPress（以及我安装的一些插件）生成的，我希望我能够仅使用CSS来完成这个任务。现在我要看看我能用这个标记做些什么。 - amphibious

@wex，我是OOCSS（面向对象的CSS）的忠实粉丝...我不喜欢给ID添加样式，因为ID应该是唯一的实例。我将所有的样式都分配给类，这样我就可以重复使用CSS块，减少代码量，使其尽可能模块化。这有助于长期运行，并让其他人编辑您的代码更好地理解它并轻松进行站点范围的更改。http://net.tutsplus.com/tutorials/html-css-techniques/object-oriented-css-what-how-and-why/。我只是和你开个玩笑 ;) - wwwroth

-1

首先想到的基本策略是：

将两个元素包装在一个容器 div 中
在容器上声明 'position: relative'，以触发 div 上的“container”属性（找不到这种副作用的真实名称）
使用 "bottom: 0" 绝对定位您的侧边栏

- Woahdae

为了我的个人记录，如果这是一个不好的解决方案，请评论为什么？我以前做过 WordPress 模板，但 OP 没有说他只能修改 CSS 而不能修改 HTML。这对我来说并不是一个确定的事情，但这是它成为一个不好的解决方案的原因吗？ - Woahdae

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wwwroth · Accepted Answer

我理解你试图做什么。我的建议是在 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