Question

在下面的简单CSS代码中，我试图直接h1的底部p的底部（h1不应该在p之下在我的代码中。）

<div id="sqrs" style="width:200px; height:200px; border:1px solid BLACK;">
<p style="width:100px; height:100px; background-color:BLUE; float:right;">blue</p>
<h1 style="background-color:YELLOW; margin-top:100px;">yellow</h1>
</div>

P样式无法更改，我不知道height的{{1}}（因为它可能是h1，h2 ...）

我尝试了h3（而不是margin-top:100%），但这也不是解决方案。

谢谢，

Answer 1

请参阅http://jsfiddle.net/3sWEt/1/

#sqrs{
    width:200px; height:200px; border:1px solid black;
    line-height:100px;
    text-align:right;
}
#sqrs>*{
    text-align:left;
    line-height:normal;
}
#sqrs>p{
    width:100px; height:100px; background-color:blue; float:right;
}
#sqrs>h1{
    background-color:yellow;
    display:inline-block;
    vertical-align:bottom;
}

您可以使用相同的line-height，display:inline-block和vertical-align:bottom。

但问题是<h1>不会扩展它的宽度以覆盖它的父级剩余宽度。

Answer 2

请参阅http://jsfiddle.net/3sWEt/3/

您可以将position:relative设置为容器，position:absolute设置为bottom:0 <h1>：

CSS：

#sqrs{
    width:200px; height:200px; border:1px solid black;
    overflow:hidden;
}
#sqrs>*{
    height:100px;
}
#sqrs>p{
    width:100px; background-color:blue; float:right;
}
#sqrs>div{
    overflow:hidden;
    position:relative;
}
#sqrs>div>h1{
    background-color:yellow;
    position:absolute;
    bottom:0;
    width:100%;
}

HTML：

<div id="sqrs">
    <p>blue</p>
    <div><h1>yellow</h1></div>
</div>

margin-top到两个元素的直底

2 个答案: