Html 机架式响应头

我一直在谷歌上下搜索，试图找到一个解决方案，但我真的需要一些个人帮助。我正在尝试创建一个由4部分组成的响应标题：

标题BG

左边的欢迎标签

标志在中间

右边的社交图标

这是我正在编写的本地版本的副本：

标题bg是1920宽，我翻转了它，复制了它，使它在任何更大的屏幕上重复-x。当宽度减小到小于500px时，它只需要缩放一点。大约70%的大小应该可以做到这一点，但我不知道如何做到这一点

这是我插入index.php以创建标题bg的代码：

<div style="background-image:url(/jaredbrandjes.co.za/images/template/headerbar.png); overflow:hidden; background-repeat:repeat-x;height: 366px;position: absolute;width: 100%;"></div>

这是我的元素2,3,4的当前代码：

<div class="gantry-img"><span class="gantry-img" style="text-align: left;"><img style="float: left;" src="images/template/header_welcometag.png" alt="" /></span> <span class="gantry-img" style="text-align: center;"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/template/header_logo.png" alt="" /></span> <span class="gantry-img" style="text-align: right;"><img style="float: right;" src="images/template/header_social.png" alt="" /></span></div>

我试着把元素排成一行，首先是社交图标垂直居中的logo和水平居中的logo，而不是像现在这样仅仅是欢迎标签右边的空间。然后，在响应性方面，我希望徽标保持绝对中心，因为宽度减小，左侧的欢迎标签变小，以适应需要，社交图标位于下方并居中。我希望这是有道理的

我正在使用火箭主题模板Hadron和joomla来构建我的网站。标题必须完全展开浏览器，并且必须能够响应任何屏幕大小。我知道门架内置了一些这样的工具，但我不知道如何整合它们。如果您能为我的任何问题提供帮助，我们将不胜感激

万分感谢

以下是我的网站概念图：

---

我想这会给你一个开始-

HTML

把你的背景图像放在我有空白URL的TopHead中。< /P>

---

在小提琴中演奏它，甚至将背景图像链接到它，然后一旦你得到了你想要的方式，就从小提琴中复制它。

你应该改为制作跨度div，然后根据你的意愿调整它们的尺寸。调整对齐和最小宽度，当需要时，它们将环绕在中心位置

<div class="gantry-img">
    <div style="text-align: left; width:30%; min-width:200px; float:left;" class="gantry-img">
        <img alt="" src="/joomla/test/images/template/header_welcometag.png" style="margin-left:0; width:100%;">
    </div> 
    <div style="text-align: center; width:40%; min-width:200px; float:left;" class="gantry-img">
        <img alt="" src="/joomla/test/images/template/header_logo.png">
    </div> 
    <div style="text-align: right; width:30%; min-width:200px; float:left;" class="gantry-img">
        <img alt="" src="/joomla/test/images/template/header_social.png" style="float: right;">
    </div>
    <div style="clear:both;"></div>
</div>

---

多亏了这里的答案和一些额外的研究，我用下面的代码完成了我的努力

<div class="gantry-img">
<div class="gantry-img welcometag" style="text-align: left; width: 30%; min-width: 200px; float: left; max-width: 100%;"><img style="margin-left: 0; width: 100%;" src="images/template/header_welcometag.png" alt="" /></div>
<div class="gantry-img clogo" style="text-align: center; width: 40%; min-width: 100px; float: left; margin-top: 32px;"><img src="images/template/header_logo.png" alt="" /></div>
<div class="gantry-img socialcons" style="text-align: right; width: 30%; min-width: 200px; float: left; margin-top: 94px; margin-left: -5%;"><img style="float: right;" src="images/template/header_social.png" alt="" /></div>
<div style="clear: both;"> </div>
</div>

这样做的目的是移除欢迎标签，并重新定位和缩放任何小于768px宽屏幕的徽标和社交图标

---

感谢所有参与的人=）

到目前为止，您能向我们展示您的html和css吗？抱歉，代码显示不正确。这是我的编辑，其他的都是原创的joomla和rockettheme。我将尝试上传我的本地版本供您查看。=）我添加了URL供您查看=）非常感谢！非常感谢，帮了我的忙=）@JaredBrandjes很高兴我帮了忙！您可以向上投票，因为您觉得它很有用；）

<div class="gantry-img">
    <div style="text-align: left; width:30%; min-width:200px; float:left;" class="gantry-img">
        <img alt="" src="/joomla/test/images/template/header_welcometag.png" style="margin-left:0; width:100%;">
    </div> 
    <div style="text-align: center; width:40%; min-width:200px; float:left;" class="gantry-img">
        <img alt="" src="/joomla/test/images/template/header_logo.png">
    </div> 
    <div style="text-align: right; width:30%; min-width:200px; float:left;" class="gantry-img">
        <img alt="" src="/joomla/test/images/template/header_social.png" style="float: right;">
    </div>
    <div style="clear:both;"></div>
</div>

<div class="gantry-img">
<div class="gantry-img welcometag" style="text-align: left; width: 30%; min-width: 200px; float: left; max-width: 100%;"><img style="margin-left: 0; width: 100%;" src="images/template/header_welcometag.png" alt="" /></div>
<div class="gantry-img clogo" style="text-align: center; width: 40%; min-width: 100px; float: left; margin-top: 32px;"><img src="images/template/header_logo.png" alt="" /></div>
<div class="gantry-img socialcons" style="text-align: right; width: 30%; min-width: 200px; float: left; margin-top: 94px; margin-left: -5%;"><img style="float: right;" src="images/template/header_social.png" alt="" /></div>
<div style="clear: both;"> </div>
</div>

@media all and (max-width : 768px) {.welcometag{display:none;} .clogo{width: 100% !important; clear:both; margin-top: 5px !important;} .socialcons{min-width:100px !important; width: calc(100% - 10px) !important; clear: both !important;text-align: center !important;padding: 15px 5px 5px 5px !important;margin: 20px 0px 0px 0px !important;float: none !important;} .socialcons img{float:none !important;}}