我在一个 jsfiddle 元素上工作,找不到在响应模式下将我的左背景图像 div 放在我的右菜单 div 下的解决方案。
此时,我的背景图片 div 位于顶部,在我的菜单 div 下方。
这是我的链接:Jsfiddle
截图
(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>
最佳答案
从 .dessous 中删除固定:
.dessous {
background: url(http://www.work.booclin.ovh/wpcontent/uploads/2017/04/Unknown-7.jpeg) no-repeat top center;
}
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;
-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>
关于html - div 在响应模式下的另一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43739829/