Question

前几天我问了这个问题，但是无法得到我需要的解决方案......

我想将徽标区域两侧的搜索框和社交媒体图标与标题的底部（灰色部分）对齐。当网站的用户/客户想要为自己交换徽标时，无论其高度如何，搜索框和社交媒体区域都会将自己推向满足标题的底部。

以下是我想要了解的一个简单示例： http://jsfiddle.net/AeRc8/

如果有人可以通过说明如何在jsfiddle中完成这项工作来取悦，那将非常感激。

Answer 1

这是您的jsfiddle示例的编辑版本：

http://jsfiddle.net/Shedal/AeRc8/1/

我将position: relative应用于<header>元素，将position: absolute应用于#search和#social元素，其中定位规则对应于左下角和右下角。

当然，删除了float: left和float: right，因为现在可以通过绝对定位来实现此效果。

Answer 2

没有像float:center;这样的内容，有关详细信息，请参阅MDN Docu

vertical-align仅适用于内联上下文MDN Doku

你可以做的是将这两个元素绝对定位如下：

#search{
   position:absolute;
   left:0;bottom:0;
}

#search{
   position:absolute;
   right:0;bottom:0;
}

由于position:absolute;取决于位置不是static的第一个祖先元素，因此您需要在容器元素（在您的情况下为position:relative;）上应用header做这项工作。

Answer 3

您可以将要按下的所有元素放在容器内，然后将其绝对放置在标题的底部，如下所示：

header {
    margin: 0px 29px 29px 29px;
    background: #CCC;
    display:block;
    position:relative;
}

.section {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}

通过这种方式，您可以更好地控制放置在该部分中的元素。

演示：http://jsfiddle.net/AeRc8/2/

对齐搜索框＆amp;社交图标到标题标记的底部

3 个答案: