Html 对齐搜索框&；标题标签底部的社交图标

前几天我问了这个问题，但没有得到我需要的答案

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

下面是一个简单的例子，说明我想要了解的内容：

---

如果有人能通过演示如何在JSFIDLE中实现这一点来提供帮助，我们将不胜感激

以下是您的JSFIDLE示例的编辑版本：

我将

position:relative

应用于

元素，将

position:absolute

应用于#search and#social元素，定位规则对应于左下角和右下角

---

当然，删除了

浮动：左

和

浮动：右

，因为这种效果现在是通过绝对定位实现的，有关更多信息，请参阅

垂直对齐

仅在内联上下文中有效

你能做的是，像这样定位这两个元素：

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

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

---

因为

位置：绝对

依赖于位置不是

静态的第一个祖先元素，您需要应用
位置：相对标题
）上进行编码>，以实现此功能。
您可以将所有要向下推的元素放置在容器内，然后将其绝对定位到标题的底部，如下所示：

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

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

这样，您就可以更好地控制放置在该部分中的元素

演示：
感谢您的快速回复。我已经添加了必要的更改，您的见解非常深刻。我注意到你用你的技巧增加了一门课。谢谢你的快速回复。我已经添加了必要的更改，您的见解非常深刻。我觉得这是一个有点奇怪的阅读在这里如何对齐3个div，看到有人建议浮动：中心；谢谢你的快速回复。我已经添加了必要的更改，您的见解非常深刻。这就是我将要用来实现我想要的结果的方法，再次，将它放在一个示例中，并附上您的后续解释，这非常有用。