我工作在一个jsfiddle项目上,无法找到解决方案将我的左侧背景图像div放在响应模式下的右侧菜单div下。div在响应模式下的另一个
此时,我的背景图片div停留在顶部,在我的菜单div下。
这里是我的链接:Jsfiddle
SCREENSHOT
(1)这个我有什么(2)我想要什么
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
.total {
box-sizing: border-box;
height: 100%
}
.dessus {
width: 30%;
min-height: 100%;
float: right;
background: #EEF;
}
.spaceone {
margin: 0px 50px 0px 50px;
display: block
}
.sub-spaceone {
margin: 0px 50px 50px 50px;
display: block;
}
.space {
margin: 0px 50px 0px 50px;
display: block
}
.pos {
position: fixed;
bottom: 50px;
float: left;
}
.dessous {
width: 70%;
min-height: 100%;
float: left;
background: url(http://www.work.booclin.ovh/wp-content/uploads/2017/04/Unknown-7.jpeg) no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media screen and (max-width:1024px) {
.total {
width: 100%;
text-align: center;
overflow: hidden;
}
.dessous {
width: 100%;
text-align: center;
overflow: hidden;
}
.dessus {
width: 100%;
min-height: 0px;
}
.pos {
position: relative;
bottom: 0px;
float: none;
margin: 30px 50px;
}
.spaceone {
margin: 0px;
float: left;
display: block
}
.sub-spaceone {
display: none
}
.space {
margin: 0px 30px 30px 0px;
display: inline;
float: right;
}
}
@media screen and (max-width:600px) {
.pos {
margin: 50px auto;
display: block;
float: none;
}
.spaceone {
margin: 30px auto;
display: block;
float: none;
}
.space {
margin: 10px 20px;
display: inline;
float: none;
}
}
@media screen and (max-width:300px) {
.pos {
margin: 50px auto;
display: block;
float: none;
}
.spaceone {
margin: 30px auto;
display: block;
float: none;
}
.space {
margin: 10px auto;
display: block;
float: none;
text-align: center;
}
}
<div class="total">
<div class="dessus">
<div class="pos">
<span class="spaceone">Title</span>
<span class="sub-spaceone">Sub-Title</span>
<span class="space">Menu 1</span>
<span class="space">Menu 2</span>
<span class="space">Menu 3</span>
</div>
</div>
<div class="dessous"></div>
</div>
虽然有一个小提琴是一件很好的事,帮助我们理解您的问题更好,你还必须包括代码**在你的问题** - 这就是为什么当你发布它时,你必须把它作为“代码”来欺骗系统(你也可以创建一个堆栈片段 - 你可以在编辑器的工具提示中的按钮中找到它) –
I做了它; D @AlonEitan –
你需要图像在菜单**下,而不是**下面**它在响应模式? –