水平创建一个接一个的flexbox容器答案

【问题标题】：Create flexbox container one after another horizontally水平创建一个接一个的flexbox容器
【发布时间】：2020-12-14 12:46:44
【问题描述】：

我正在尝试一个接一个地创建 2 个 flexbox 容器，我已经应用了许多类组合来完成这项工作。 Flexbox 被创建，但是当我滚动时，下一个低于上一个。输出如下所示：Current Scenario Output。

我的要求是固定那两个水平条，一个接一个，不考虑滚动。

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="{% static 'personal/mystyles.css' %}">
 </head>
<body>

<div class="d-flex flex-column flex-md-row align-items-center pt-1 px-md-4 mb-3 border-bottom shadow-sm sticky-top" style="background-color: #80ccff;">
 <h5 class="my-0 mr-md-auto font-weight-normal">
    <p>Hello, User </p>
 </h5>
 <nav class="my-0 my-md-0 mr-md-3">
    <a class="p-2 text-dark" href=""><b>Home</b></a>
    <a class="p-2 text-dark" href=""><b>Account</b></a>
    <a class="p-2 text-dark" href=""><b>Logout</b></a></p>
 </nav>
 </div>
<!--This div will be used in different html file and first div will be included using 'include' keyword of django. -->
<div class="d-flex flex-column flex-md-row align-items-center pt-5 px-md-4 border-bottom shadow-sm sticky-top" style="background-color: #80ccaa;"></div>
 </body>
</html>

【问题讨论】：

标签： html css django bootstrap-4 flexbox

【解决方案1】：

您可以像这样更改第二个水平条并添加一些 css：

&lt;div class="d-flex flex-column flex-md-row align-items-center pt-5 px-md-4 border-bottom shadow-sm sticky-top" style="background-color: #80ccaa; position: fixed; width: 100%; margin-top: 50px"&gt;&lt;/div&gt;

【讨论】：

谢谢，这在一定程度上起作用，但是在调整浏览器大小时，上部容器被隐藏，即主页、帐户、注销选项卡位于第一个 div 下方。
编辑第一条评论：菜单位于第二个 div 下方。

【解决方案2】：

将您想要的 2 个 divs 并排包装在 div 中，并使其成为 flex

<body>
 <div class="d-flex">
  <div>...</div> // your first div
  <div>...</div> // your second div
 <div>
</body>

【讨论】：

谢谢，但您在一个 div 容器中包含了两个 div。我的查询是关于 2 个单独的 div 容器一个接一个