HTML CSS：对齐3个div和底部内的元素

我目前在一个HTML5头标记内排列了3个div（向左 - 搜索框，中心 - 徽标区域和右侧的div - 为社交媒体图标）。HTML CSS：对齐3个div和底部内的元素

这似乎很好，但是，我很难将这些div中的左右元素定位到底部，并且左右div都受到徽标区域大小的影响。例如，如果我的标志是x高度，则会随着徽标尺寸高度的增加而进一步向下推动左侧和右侧的div。

我已经写了一个简单的例子来说明什么希望我说的.. http://jsfiddle.net/9patj/

如果有人可以帮助，那将是巨大的，也许奖金在走我走过它是如何实现的会非常感激。

2012-04-25 user1752759

您可以尝试在标题内进行相对/绝对定位。

对于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/

来源

2012-04-25 15:43:06

我复制了你建议的css，并将其粘贴到当前的样式上，结果是它将所有3个div放在标题区域之外。无论如何，谢谢 – user1752759 2012-04-25 15:57:51

是这样的？

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

您必须添加位置。

来源

2012-04-25 15:46:11 Scriptor

这将左侧和右侧元素放置在页面底部，而不是页眉底部。不管怎样，谢谢你。 – user1752759 2012-04-25 15:53:34

呃，它不应该。 – Scriptor 2012-04-25 16:09:07

呃......确实如此。 – user1752759 2012-04-26 12:56:40

HTML CSS：对齐3个div和底部内的元素

回答

相关问题