CSS龙门反应头

Question

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

1. 标题BG
2. 左侧的欢迎标签
3. 中心标志
4. 右侧的社交图标

以下是我正在处理的本地版本的副本： http://jaredbrandjes.co.za/joomla/test/

标题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>

我首先要尝试将元素连续排列在社交图标的垂直中心，徽标和徽标位于页面的水平中心，而不仅仅是欢迎标签右侧的空间，就像它在时刻。然后，就响应性而言，我希望徽标保持绝对中心，因为宽度减小，左侧的欢迎标签变得更小以适应并且社交图标落在下方并居中。我希望这是有道理的。

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

万分感谢！

以下是我网站概念的图片：

Answer 1

我认为，这会给你一个开始 - fiddle。

HTML

<div class='topheader'>
    <div class='leftthird'>Welcome tag</div>
    <div class='righttwothirds'>
        <div class='centerdiv'>Logo</div>
        <div class='rightminidiv'>Social Icons</div>
    </div>
</div>

CSS

.topheader {
    width: 80%;
    height: 100px;
    background-image: url();
    border: 1px solid black;
    margin: 10px auto;
}
.leftthird {
    width: 33%;
    height: 100%;
    background-color: yellow;
    float: left;
}
.righttwothirds {
    width: 67%;
    height: 100%;
    background-color: transparent;
    float: right;
}
.centerdiv {
    width: 50%;
    height: 100%;
    background-color: green;
    color: white;
    float: left;
}
.rightminidiv {
    width: 50%;
    height: 100%;
    background-color: blue;
    color: white;
    float: right;
}

将背景图片放在我有空白网址的topheader中。

在小提琴中播放它，甚至将你的背景图像链接到它，然后一旦你按照你想要的方式得到它，只需从小提琴中复制它。

Answer 2

您应该改为使用跨度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>

Answer 3

感谢这里的答案和一些额外的研究，我设法用以下代码完成了我的努力。

<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>

感谢@ilias

然后与其他一些研究，使用 @media all 并将其添加到css中：

@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;}}

这样做是删除欢迎标记并重新定位并缩放任何小于768像素宽的屏幕的徽标和社交图标。

感谢所有贡献的人=）