Question

我在左侧和右侧的列上都有一个固定的侧边栏，其中有几张垂直对齐的卡。调整大小后，如何使右列落在侧栏下方，以使侧栏成为顶部栏，其高度约为视口的高度的50％？

我想保持当前间距的比例，并使内容保持垂直对齐。还尝试调整边栏的大小，使其不再固定。

这是小提琴：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>

Answer 1

您首先应该考虑在媒体查询中将边栏的位置设置为静态。否则，它将越过卡片。

要使卡片在移动模式下移至侧边栏下方，我会将所有内容都放置在flexbox容器中，并将 flex-wrap 属性设置为 wrap ：它将允许如果一行中没有足够的空间，则要包装的项目。

您也可以使用bootstrap grid system。希望有帮助！

调整浏览器大小时，将右列移动到左侧固定侧边栏下方

1 个答案: