將標題與div的底部對齊

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