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

如果DIV没有父/子关系，是否将B的底部与A的底部对齐？将DIV与CSS无关的DIV的底部对齐（无父/子关系）

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/

来源

2011-12-31 amphibious

我明白你想要做什么。我建议将父div放在A和B的相对位置上，并将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

来源

2011-12-31 18:31:17 wwwroth

只是注意...那* {}在CSS可怕的形式。我只用它来摆脱浏览器的默认边距和填充。如果您是noob，请查看http://html5boilerplate.com/进行CSS重置;）所有浏览器都将默认的CSS属性分配给不同的HTML元素，这些元素会使您的代码变得不稳定。 reset.css样式表为所有大型浏览器设定了运行状态。 – wwwroth 2011-12-31 18:45:20

是的，如何访问[JS小提琴]（http://jsfiddle.net/）或[JS Bin]（http://jsbin.com/），并显示呈现的代码*呈现* ..？ =） – 2011-12-31 18:45:39

因为那太容易了; ）.. http：// jsfiddle。net/q6ECD/!! – wwwroth 2011-12-31 18:48:11

-1

想到的基本策略是：

换两人在一个div容器
声明的立场：相对“容器上触发一个“容器“div上的属性（找不到这个副作用的真实姓名）
绝对放置你的侧边栏，用”bottom：0“

来源

2011-12-31 18:32:42 Woahdae

对于我自己的后代，如果这是一个不好的解决方案，评论为什么？我之前制作过wordpress模板，OP没有说他只能修改CSS而不是HTML。这不是我给的，但是它是一个不好的解决方案的原因？ – Woahdae 2011-12-31 20:37:12

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

来源

2011-12-31 18:50:25 Wex

布拉沃，除了造型ID;） – wwwroth 2011-12-31 18:53:19

@PhillipJamesRoth - 我不明白你的意思，没有任何错误的造型ID。 http://www.w3.org/TR/CSS2/selector.html#id-selectors – Wex 2011-12-31 18:56:52

我不知道如何在Wordpress文章中创建容器DIV。这是我正在处理的页面。我很欣赏你的建议... http://rachelhappen.com/the-charlie-baker-sneaker/ – amphibious 2011-12-31 19:03:15

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

回答

相关问题