两个 div 并排（一个是固定位置）

Question

我正在尝试在网页左侧添加一个固定分区以保留导航栏信息，而在右侧我正在尝试添加另一个分区。目前不允许我将它们并排放置（我想添加到右侧的那个与固定的重叠）。如何并排对齐它们？

这是我的 CSS:

.left_fixed {
  position: fixed;
  width: 16%;
  top: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #041230;
  z-index: 100;
  min-width: 170px;
}

.right_side {
  position: relative;
  width: 100%;
  height: 100vh;
}

Answer 1

您可以将两个 div 包裹在父级 div 中，然后将 display flex 添加到父级 div。这将使两个 div 彼此相邻，然后您可以将自定义宽度添加到 .left_fixed.

Answer 2

您的样式失败的原因是“位置：相对”不会相对于“位置：固定”。

为了实现您正在寻找的效果，我建议您对这两个元素都使用 float:left。

Answer 3

由于您为固定元素设置了 width:16%，因此您应该将其余 84% width:84% 设置为正确的元素。
接下来将 max-width 设置到右侧元素，因为左侧元素有 min-width 我已将其设置为 max-width: calc(100% - 170px)
通过添加 float: right.
将右侧元素右对齐

我已将左侧元素设为半透明，因此您可以看到没有重叠。

阅读并运行下面的代码片段以详细了解它。

P.S : 我已将左侧元素设为半透明，因此您可以看到没有重叠。

希望对你有帮助

.left_fixed {
  position: fixed;
  width: 16%;
  top: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #0412303f;
  z-index: 100;
  min-width: 170px;
}

.right_side {
  width: 84%;
  background-color: green;
  height: 100vh;
  float: right;
  max-width: calc(100% - 170px);
}

body {
  margin: 0px;
}

<div class="left_fixed">
  <h1>LEFT SIDE</h1>
</div>

<div class="right_side">
  <h1>RIGHT SIDE</h1>
</div>

两个 div 并排（一个是固定位置）

Two divs side by side (one is fixed position)

html

css

position