我在左边有一个固定的侧边栏，在右边的列中有几张垂直对齐的卡片。如何在调整大小时使右栏落在侧边栏下方，以便侧边栏成为顶部栏，高度约为视口(viewport)高度的 50%？
我想保持当前间距的比例，并让内容保持垂直对齐。还试图使侧边栏在调整大小时不再固定。
这是 fiddle :https://jsfiddle.net/snacks00/wLd67f1t/
body {
margin: 0;
}
.sidebar {
width: 40%;
height: 100vh;
text-align: center;
position: fixed;
background-color: #ffffff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.05), 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.right-column {
width: 60%;
display: inline-block;
height: 100%;
margin-left: 40%;
background-color: #F9F9F9;
}
.card {
display: flex;
border-radius: 4px;
padding: 10%;
margin: 10%;
background-color: #fff;
-moz-box-shadow: 0px 1px 5px #d3d3d3;
-webkit-box-shadow: 0px 1px 5px #d3d3d3;
}
@media (max-height: 45em) {
.sidebar {
height:500px;
display: inline-block;
position: fixed;
float: left;
}
}
<!DOCTYPE html>
<html lang="en">
<body>
<div class="sidebar">
<h2>Sidebar</h2>
</div>
<div class="right-column">
<div class="content" id="1">
<div class="card">
<p>Card number 1</p> </div>
</div>
<div class="content" id="2">
<div class="card">
<p>Card number 2</p> </div>
</div>
<div class="content" id="3">
<div class="card">
<p>Card number 3</p> </div>
</div>
<div class="content" id="4">
<div class="card">
<p>Card number 4</p> </div>
</div>
</div>
</body>
</html>
最佳答案
您应该首先考虑在您的媒体查询中将边栏的位置设置为static。否则，它会翻牌。
为了让卡片在移动模式下位于侧边栏下方，我会将所有内容放在一个 flexbox 容器中，并将 flex-wrap 属性设置为 wrap:这将允许如果一行中没有足够的空间，则要换行的元素。
您还可以使用 bootstrap grid system .希望对您有所帮助!
关于html - 调整浏览器大小时，将右栏移至左侧固定侧边栏下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56514323/