我似乎无法解决这个问题。我需要将我的徽标固定在我的内容的一侧,并保持顶部导航固定。我有一个方法,但问题是它没有响应,最终徽标与内容重叠。我需要一个解决方案来使这种响应或更好的方式来做到这一点。我已经创建了一个简单的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;
}
答案 0 :(得分:0)
包装容器,然后在包装器上设置填充。
这会产生一种情况,即您的内容框缩进了徽标的宽度,并且内容位于内容框的中心。
<div class="wrapper"><div class="container"></div></div>
.wrapper
{
padding:0 0 0 158px;
}
答案 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>
将代码段设为全屏并调整其大小。
根据我的理解,您希望徽标位于内容容器内但是使用标题修复?