1

我正在尝试创建一个元素,其一侧将与父侧对齐,而不管父级有多少填充。

通常,我知道父母的填充,所以我只有这样的东西:

<div style="padding: 20px">
    ...other contents...
    <footer style="margin: 0 -20px -20px"></footer>
</div>

这只有效,因为我知道父元素有一个padding: 20px.

有没有办法在不知道父级填充的情况下将页脚拉伸到适当的大小,而不需要 javascript?

jsfiddle在这里

编辑:页脚需要使父容器变大以适应所有内容和页脚。因此,这position: absolute;可能行不通。

4

3 回答 3

3

当你做填充时,你告诉它的内容扩展并不重要,在第二种情况下。在第一种情况下,您必须为两者添加填充,然后它们对齐。

为了解决我position:relative在父 div 中使用,然后在页脚中使用position:absolute。结果如下:http: //jsbin.com/arosuz/1/edit

何时在相对内容中使用 position :absolute ,告诉它现在它的内容将是他的父容器(相对)。

这里有一个很好的教程: http: //learnlayout.com/position.html

于 2013-06-12T18:55:17.860 回答
1

CSS:

article {
    background-color: #eee;
    margin: 20px;
    position:relative;

}
article:after{
    content:' ';
    display:block;
    width:1px;
    height:40px /* Height of footer */;
    clear:both;
}
footer {
    background-color: #ddd;
    position:absolute;
    text-align: center;
    width:100%;
    left:0;
    bottom:0;
    padding: 10px 0;

    /* this only works for a container with
     * padding: 20px;
     * How can this work for a container
     * any amount of padding, without
     * javascript? */
}

http://jsbin.com/arosuz/4/

于 2013-06-12T19:16:38.580 回答
0

如果您对父 div 填充 CSS 值感兴趣,您也可以使用它。

     var padding = $(this).parent("div").css("padding");
于 2013-06-12T18:58:35.853 回答