如何將浮動元素對齊到其容器的底部

Question

簡單的問題，但我正在努力解決方案。

Jsfiddle here。

我怎樣才能拿到冠軍和日期都對齊到容器的底部，同時確保：

• 標題的長度將推動整個日期（但並不需要包裝）
• 藍色按鈕總是集中的日期和紅色圖標
• 標題欄容器是永遠不變的固定高度
• 需要如果可能的話只CSS的解決方案之間對準 - 我已經知道如何用做JS如果需要

HTML：

div class="titlebar bgEarth0"> 
    <h1 id="title">Test Title</h1> 
    <h2 id="date">23 October 2013</h2> 
    <div class="icon"></div> 
    <div class="buttonArea"> 
     <div class="button"></div> 
    </div> 
</div> 

CSS：

.titlebar { height: 50px; border:1px solid #000} 
#title {font-size: 20px; font-weight: normal; float: left; margin:0} 
#date { font-size: 12px; font-weight: normal; float: left; margin-left: 30px; margin:0 12px} 
.buttonArea {position:relative; overflow:auto; height:40px; margin-top:5px} 
.button {margin:0 auto; width:60px; height:40px; background:#0000ff} 
.icon {float:right; background:#ff0000; height:40px; width:60px; margin-top:5px} 

Answer 1

http://jsfiddle.net/hC236/

您可以使用絕對位置。 用div將標題和日期換行並將其位置設置爲絕對。

HTML：

<div class="titlebar bgEarth0"> 
    <div class="bleh"> 
     <h1 id="title">Test Title</h1> 
     <h2 id="date">23 October 2013</h2> 
    </div> 
    <div class="icon">ddd</div> 
    <div class="buttonArea"> 
     <div class="button"></div> 
    </div> 
</div> 

CSS：

.titlebar { 
    height: 50px; 
    border:1px solid #000; 
    position: relative; 
} 
.bleh { 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
} 
#title { 
    font-size: 20px; 
    font-weight: normal; 
    float: left; 
    margin:0 
} 
#date { 
    font-size: 12px; 
    font-weight: normal; 
    float: left; 
    margin-left: 30px; 
    margin:0 12px 
} 

.buttonArea { 
    position: absolute; 
    overflow:auto; 
    height:40px; 
    top:5px; 
    right: 0px; 
} 

.button { 
    margin:0 auto; 
    width:60px; 
    height:40px; 
    background:#0000ff 
} 

.icon { 
    background:#ff0000; 
    height:40px; 
    width:60px; 
    margin-top: 5px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
} 

OR表範例：

http://jsfiddle.net/hjM56/

HTML：

<div class="titlebar"> 
    <div class="col-1"> 
    <h1 id="title">Test Title</h1> 
    <h2 id="date">23 October 2013</h2> 
    </div> 
    <div class="col-2"> 
    <div class="icon"></div> 
    </div> 
    <div class="col-3"> 
    <div class="button"></div> 
    </div> 
</div> 

CSS：

.titlebar { 


display: table; 
    height: 50px; 
    border: 1px solid #000; 
    width: 100%; 

} 

.col-1, 
.col-2, 
.col-3 { display: table-cell; } 

.col-1 { 
    white-space: nowrap; 
    vertical-align: bottom; 
    width: 1%; 
} 

.col-2 { 
    text-align: center; 
    width: auto; 
} 

.col-3 { 
    text-align: right; 
    width: 1%; 
} 

#title { 
    font-size: 20px; 
    font-weight: normal; 
    display: inline-block; 
    margin: 0px; 
    padding: 0px; 
} 

#date { 
    font-size: 12px; 
    font-weight: normal; 
    margin-left: 12px; 
    margin-top: 0px; 
    margin-right: 12px; 
    margin-bottom: 0px; 
    display: inline-block; 
    padding: 0px; 
} 

.button { 
    width: 60px; 
    height: 40px; 
    background: #0000ff; 
    margin-top: 5; 
    display: inline-block; 
} 

.icon { 
    background: #ff0000; 
    height: 40px; 
    width: 60px; 
    margin-top: 5px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
} 

Answer 2

您應不使用浮動，除非必要的。看到這個JSFiddle Live Demo

基本上，如果你刪除浮動和display:inline-block;而不是，他們將對齊。我還刪除了overflow:auto，因爲這會限制圖標區域。

此外，添加left:15%;將對齊日期和紅色區域之間的藍色區域。

編輯：帶有最大寬度規格以在標題欄內包含div的示例。 Live Demo

Answer 3

下面是做這件事，但它涉及到一些額外加價。

我說周圍的標題和日期一些包裝如下：

<div class="titlebar"> 
    <div id="titleArea"> 
     <div id="table-wrap"> 
     <div id="table-cell"> 
      <h1 id="title">Test Title</h1> 
      <h2 id="date">23 October 2013</h2> 
     </div> 
     </div> 
    </div> 
    <div class="icon"></div> 
    <div class="buttonArea"> 
     <div class="button"></div> 
    </div> 
</div> 

應用下面的CSS：

.titlebar { 
    height: 50px; 
    border:1px solid #000 
} 
#titleArea { 
    height:40px; 
    margin-top:5px; 
    float: left; 
} 
#table-wrap { 
    display: table; 
    height: 100%; 
} 
#table-cell { 
    display: table-cell; 
    height: 100%; 
    vertical-align: bottom;  
} 
#title { 
    font-size: 20px; 
    font-weight: normal; 
    padding:0; 
    display: inline; 
} 
#date { 
    font-size: 12px; 
    font-weight: normal; 
    padding-left: 12px; 
    display: inline; 
} 
.buttonArea { 
    position:relative; 
    overflow:auto; 
    height:40px; 
    margin-top:5px; 
    border: 1px dotted blue; 
} 
.button { 
    margin:0 auto; 
    width:60px; 
    height:40px; 
    background:#0000ff 
} 
.icon { 
    float:right; 
    background:#ff0000; 
    height:40px; 
    width:60px; 
    margin-top:5px; 
    border: 1px dotted blue; /* for demo only */ 
} 

見演示在：http://jsfiddle.net/audetwebdesign/5NDDQ/

我創建了一個外部包裝#titleArea與#buttonArea具有相同的高度和頂部邊距。

在#titleArea之內，我創建了一個CSS表格/表格單元格（兩個嵌套div），以便我可以將垂直對齊放在底部。

最後，我將display: inline設置爲#title和#date。

可能需要調整的細節涉及標題和時間的基線。底部的引導使文本稍微坐在按鈕的底部邊緣之上。

看起來似乎很多工作似乎是一個相對簡單的要求。

爲了使這個多一點防彈，我會一個最小寬度添加到.titlebar防止.buttonArea發展水平滾動條和.icon從包裝到第二行。