HTML CSS：對齊3個div和底部內的元素

Question

我目前在一個HTML5頭標記內排列了3個div（向左 - 搜索框，中心 - 徽標區域和右側的div - 爲社交媒體圖標）。

這似乎很好，但是，我很難將這些div中的左右元素定位到底部，並且左右div都受到徽標區域大小的影響。例如，如果我的標誌是x高度，則會隨着徽標尺寸高度的增加而進一步向下推動左側和右側的div。

我已經寫了一個簡單的例子來說明什麼希望我說的.. http://jsfiddle.net/9patj/

如果有人可以幫助，那將是巨大的，也許獎金在走我走過它是如何實現的會非常感激。

Answer 1

您可以嘗試在標題內進行相對/絕對定位。

對於CSS，你可以嘗試：

header { 
    margin: 0px 29px 29px 29px; 
    background: #CCC; 
    width:960px; 
    height: 160px; 
    vertical-align: bottom; 
    display: table-cell; 
    position: relative; 
} 

#search { 
    float:left; 
    width:215px; 
    background-color:red; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
} 

#social { 
    float:right; 
    width:215px; 
    background-color:yellow; 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
} 

#logo { 
    float:center; 
    text-align:center; 
    position: absolute; 
    bottom: 0px; 
    left: 50%; 
} 

通過在文件頭部中設置相對位置，可以將每個子元素設爲絕對定位。這將允許您將每個子元素放置在標題的底部。

重要的部分是位置 CSS標籤和離開，右和底部標籤。見http://jsfiddle.net/9patj/10/

Answer 2

是這樣的？

http://jsfiddle.net/9patj/9/

您必須添加位置。