我工作在一個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 –
你需要圖像在菜單**下,而不是**下面**它在響應模式? –