时间戳

首页 > 解决方案 > 如何使用 Flexbox 将列堆叠在一起？无法让布局工作

html - 如何使用 Flexbox 将列堆叠在一起？无法让布局工作

问题描述

我在尝试将两个 div 堆叠在右侧的内容区域 div 旁边时遇到问题。

像这样，

content area | right div 1 | right div 2

但是，它们都只是内嵌在 3 列中。我想要 2 列，第 1 列，然后是右侧的 2 个 div。

我需要这 2 个 div 不被包装在容器中，或者aside我希望 div 2 使用position: sticky

这是一个演示： https ://codepen.io/pbul2004/pen/xxZKyVR

/* CSS */

.container {
  display: flex;
}

.content {
  max-width: 100%;
  flex-basis: 74%;
  border: 1px solid black;
  width: 300px;
}

.right-side {
  align-self: flex-start;
  flex: 1 1;
  flex-basis: 40%;
  min-width: 338px;
  display: block;
  width: 400px;
}
<!--HTML:-->

<div class="container">
  <div class="content">content area here</div>
  <div class="right-side personal-info">personal info here</div>
  <div class="right-side product-info">this div sticky</div>
</div>

标签： htmlcssflexbox

解决方案

我需要这 2 个 div 不要被包装在容器中或放在一边，因为我希望 div 2 使用 position: sticky

我不确定我是否理解你问题的那一部分，但你为什么不简单地用父 div 包装最后两个 div？

换句话说：

<div class="container">
  <div class="content">content area here</div>
  <div>
    <div class="right-side personal-info">personal info here</div>
    <div class="right-side product-info">this div sticky</div>
  </div>
</div>

推荐阅读