HTML CSS : Aligning 3 divs & the elements within to the bottom

Question

我目前在一个 HTML5 header 标签中排列了 3 个 div(左边是一个搜索框，中间是一个 Logo 区域，右边是一个 div - 用于社交媒体图标)。

这似乎没问题，但是，我很难将这些 div 中的左右元素定位到底部，并且让左右 div 都受到 Logo 区域大小的影响。例如，如果我的 Logo 是 x 高度，它会随着 Logo 尺寸高度的增加而将左右 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%; 
}

通过在页眉上设置相对定位，可以将其每个子元素设置为绝对定位。这将允许您将每个子元素放在标题的底部。

重要的部分是 position CSS 标签和 left、right 和 bottom 标签。参见 http://jsfiddle.net/9patj/10/