如何将三个 div 放在父 div 中，使两个在左侧堆叠在一起，一个在右侧？（阅读说明）[重复]

【问题标题】：How to put three div's in a parent div such that two are below stacked on top of each other on left and one is on the right? (Read description) [duplicate]如何将三个 div 放在父 div 中，使两个在左侧堆叠在一起，一个在右侧？（阅读说明）[重复]
【发布时间】：2022-01-11 10:44:17
【问题描述】：

我有一个名为 outer 的父 div 和三个名为 top-left、bottom-left 和 right 的孩子。

右边的高度为100vh，宽度为80vw。左边的有宽度20vw 和不确定的高度。另外，右边的需要固定在原地，所以当用户滚动时，左边的滚动，右边的保持在原处。

如何让 div 放在合适的位置？

这是我想要在网页上显示的粗略图片：

【问题讨论】：

标签： javascript html css

【解决方案1】：

使用网格布局：

.outer {
  display: grid;
  grid-template-areas: "tl r" "bl r";
  grid-template-columns: 20vw 1fr;
  grid-template-rows: 30vh 1fr;
  height: 100vh;
}

#top-left {
  grid-area: tl;
  background-color: red;
}

#bottom-left {
  grid-area: bl;
  background-color: green;
}

#right {
  grid-area: r;
  background-color: blue;
}

<div class="outer">
  <div id="top-left">Top Left</div>
  <div id="bottom-left">Bottom Left</div>
  <div id="right">Right</div>
</div>

A Complete Guide to Grid | CSS-Tricks - CSS-Tricks
CSS Grid Layout - CSS: Cascading Style Sheets | MDN

【讨论】：

在这里！解决了这个问题。将右侧元素放入容器 div 中，将其与左侧元素一起放入网格中，使用网格元素对其进行排序，将右侧元素（容器内）设置为 position:fixed;
CSS Grid 布局会更简单，也更灵活。