Question

我正在尝试将一些文本与html / css中div的底部对齐并且遇到很多困难。我在网上看到的一切都表明这很简单，你只需将父div设置为相对定位，将文本设置为绝对定位，并将文本底部的底值设置为0px。到目前为止，这对我没有用。另外，我正在尝试将文本对齐到右下角。对齐右边工作正常，但我无法将文本移到底部。

这是我的HTML

<div class = "topContainer">
    <div class = "icon">
        <div class = "iconHeader">
                <h2>icon</h2>
        </div>
    </div>
    <div class = "topBar">
            <h1>top bar</h1>
    </div>
</div>

这是CSS

h1 {
    font-family:Helvetica;
    font-weight: bold;
    font-size: 250%;
    color:white;
    position:absolute;
    bottom:0px;
    right:0px;
}
h2 {
    font-family:Helvetica;
    font-weight: bold;
    font-size: 150%;
    color:black;
    margin-top: 0px;
}
/*Specific Page Elements*/
.topContainer {
    position: relative;
    float:center;
    height:100px;
    width:75%;
    margin: auto;
    padding:5px;
}
.icon {
    background-color:white;
    float:left;
    width:20%;
    height:100%;
    border-style: solid;
    border-color: gray;
    border-width: 5px;
    border-radius: 5px;
}
.iconHeader {
    background-color:white;
}
.topBar {
    background-color:black;
    float:right;
    width:77%;
    height:100%;
    border-style: solid;
    border-color: gray;
    border-width: 5px;
    border-radius: 5px;
    position: relative;
}

有人知道我做错了什么或有什么建议吗？

Answer 1

简单，只需添加保证金：0px

h1 {
font-family:Helvetica;
font-weight: bold;
font-size: 250%;
color:white;
position:absolute;
bottom:0px;
right:0px;
margin:0px;
}

https://jsfiddle.net/b0ec6jpn/

Answer 2

您需要做的就是让您的顶栏有position: relatve并添加margin-top: 55px;并添加text-align: right;

这是一个链接http://codepen.io/HTMLNoob/pen/WrJjwX

将标题对齐div的底部

2 个答案: