Создавать контейнеры flexbox один за другим по горизонтали

#html #css #django #bootstrap-4 #flexbox

#HTML #css #django #bootstrap-4 #flexbox

Вопрос:

Я пытаюсь создать 2 контейнера flexbox один за другим, я применил комбинацию нескольких классов, чтобы заставить это работать. Создается Flexbox, но когда я прокручиваю, нижний опускается ниже верхнего. Результат, как показано здесь: вывод текущего сценария.

Мое требование — чтобы эти 2 горизонтальные полосы были исправлены и одна за другой, независимо от прокрутки.

 <!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>

Ответ №1:

Вы можете изменить свою вторую горизонтальную полосу следующим образом и добавить немного css:

 <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"></div>

1. Спасибо, это сработало в определенной степени, но при изменении размера браузера верхний контейнер становится скрытым, т. Е. вкладки «Главная страница», «Учетная запись», «Выход» находятся ниже первого div.

2. Редактирование первого комментария: меню находится под вторым разделом.

Ответ №2:

Оберните 2 divs , которые вы хотите, рядом друг с другом внутри div и сделайте это flex

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