我正在使用一个设计较旧的旧网站,该网站使用两个垂直菜单侧边栏,一个在主要内容的左侧,一个在右侧。在狭窄的屏幕上,例如在移动 View 中,侧边栏 div 显示在主要内容之前。我希望它们放在页面底部,在主要内容 div 之后。
我知道这可以通过 flexbox 轻松完成,但是父级和容器 div 太多了,我不想破坏任何东西。重新设计整个网站超出了本次任务的范围。
在 CSS 中有没有办法强制这两个 div 位于它们容器的底部,而不更改任何父 div 的属性?
编辑:或者,在移动 View 中将内容 div 推到顶部也可能有效。
最佳答案
这可以通过 css 在元素上使用 position: relative
来完成,并在左侧边栏上使用负值的 left 属性 ' https://jsfiddle.net/bdp1rhvq/5/ .也可以用JS来完成。
<div id='wrapper'>
<div id='content'>
content
</div>
<div id='sidebar-left'>
sidebar-left
</div>
<div id='sidebar-right'>
sidebar-right
</div>
</div>
body {
margin: 0;
padding: 30px;
}
#wrapper {
margin: 0 auto;
}
#content {
width: 100%;
height: 130px;
float: left;
background: #FF5733;
}
#sidebar-left {
width: 100%;
height: 130px;
float: left;
background: #00cc99;
}
#sidebar-right {
width: 100%;
height: 130px;
float: left;
background: #cc66ff;
}
@media only screen and (min-width: 600px) {
#wrapper,
#content,
#sidebar-left,
#sidebar-right {
position: relative;
}
#sidebar-right {
width: 25%;
right: 0;
}
#sidebar-left {
width: 25%;
left: -50%;
}
#content {
width: 50%;
left: 25%;
}
}
关于html - 在移动 View 中的主要内容之后显示侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58203009/