2

我目前在一个 HTML5 标题标签中排列了 3 个 div（左侧 - 一个搜索框，中心 - 一个徽标区域和右侧的 div - 用于社交媒体图标）。

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

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

如果有人可以提供帮助，那将是非常棒的，也许在引导我了解它是如何实现的过程中获得奖励将不胜感激。

4

2 回答 2

2

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

对于 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 标签和left、right和bottom标签。见http://jsfiddle.net/9patj/10/

于 2012-04-25T15:43:06.707 回答
1

像这样？

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

您必须添加职位。

于 2012-04-25T15:46:11.557 回答