1

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

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

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

如果有人可以通过说明如何在 jsfiddle 中完成此操作来提供帮助，我们将不胜感激。

4

3 回答 3

1

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

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

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

当然，去掉float: leftand float: right，因为这个效果现在是通过绝对定位来实现的。

于 2012-04-26T13:45:38.093 回答
1

没有这样的东西float:center;，有关更多信息，请参阅MDN 文档

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

您可以做的是将这两个元素绝对定位，如下所示：

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

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

因为position:absolute;取决于位置不是 的第一个祖先元素static，所以您需要position:relative;在容器元素（在您的情况下为header）上应用才能使其工作。

于 2012-04-26T13:48:33.737 回答
1

您可以将所有要下推的元素放入容器中，然后将其绝对定位到标题的底部，如下所示：

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/

于 2012-04-26T13:48:47.270 回答