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/

你必须添加职位。

HTML CSS：对齐3个div和＆amp;底部的元素

2 个答案: