固定徽标到内容

时间:2015-04-09 09:46:35

标签: css css3 responsive-design

我似乎无法解决这个问题。我需要将我的徽标固定在我的内容的一侧,并保持顶部导航固定。我有一个方法,但问题是它没有响应,最终徽标与内容重叠。我需要一个解决方案来使这种响应或更好的方式来做到这一点。我已经创建了一个简单的jsfiddle来解释到目前为止发生了什么。如果您查看全屏,红色框表示徽标并重新调整屏幕大小,您将看到我的问题。

全屏:https://jsfiddle.net/7dycmyv0/embedded/result/

工作:https://jsfiddle.net/7dycmyv0/

到目前为止,这是我的工作。任何帮助以更好的方式做到这一点将不胜感激。我希望这个问题很清楚,但如果有什么需要清理的话请问!

HTML:

<div class="fullwidth top_header">
<div class="top_header_wrapper"></div>
<div class="logo"></div>
</div>
<div class="container"></div>

CSS:

.fullwidth {
width:100%;
}
.top_header {
position:fixed;
top:0;
right:0;
background:#8d2890;
height:39px;
}
.logo {
width:158px;
height:119px;
background:#ff0000;
position:relative;
margin: 10px 0 0 10px;
}
.container {
height:1000px;
clear: both;
margin: 0 auto;
max-width: 1000px;
padding: 0 10px;
background:#000;
}

3 个答案:

答案 0 :(得分:0)

包装容器,然后在包装器上设置填充。

这会产生一种情况,即您的内容框缩进了徽标的宽度,并且内容位于内容框的中心。

<div class="wrapper"><div class="container"></div></div>

.wrapper
{
    padding:0 0 0 158px;
}

https://jsfiddle.net/7dycmyv0/1/

答案 1 :(得分:0)

为什么不在margin-left上添加.container

.fullwidth { width:100%; }
.top_header { position:fixed; top:0; right:0; background:#8d2890; height:39px; }
.logo { width:158px; height:119px; background:#ff0000; position:relative; margin: 10px 0 0 10px; }
.container { height:500px; clear: both; margin: 0 auto 0 170px; max-width: 1000px; padding: 0 10px; background:#000; }
<div class="fullwidth top_header">
    <div class="top_header_wrapper"></div>
    <div class="logo"></div>
</div>
<div class="container"></div>

答案 2 :(得分:0)

这是你想要的吗?

.fullwidth { width:100%; }
.top_header { position:fixed; top:0; right:0; background:#8d2890; height:39px; }
.logo { width:158px; height:119px; background:#ff0000; position:fixed; margin: 10px 0 0 0; }
.container { height:500px; clear: both; margin: 0 auto; max-width: 1000px; padding: 0 10px; background:#000; }
<div class="fullwidth top_header">
    <div class="top_header_wrapper"></div>
</div>
<div class="container">
    <div class="logo"></div>
</div>

将代码段设为全屏并调整其大小。

根据我的理解,您希望徽标位于内容容器内但是使用标题修复?