连续制作两个容器

Question

请问如何解决？我需要第二个容器在第一个容器的底部，我不知道如何解决。我已经使用了 display: flex，但它似乎不适用于两个容器，这就是为什么我在如何修复它时遇到麻烦：

.content {
  display: flex;
}

aside {
  border-right: 1px solid #000000;
}

aside {
  height: 100vh;
  width: 350px;
}

aside ul {
  padding-top: 5%;
  list-style-type: none;
  text-align: center;
}

aside a {
  text-decoration: none;
  display: block;
  font-size: 23px;
  color: black;
  margin: 40px;
  font-family: $font1;
  font-weight: lighter;
}

aside a:hover {
  color: $color1;
}

.first {
  margin: 50px;
}

.first a {
  background-color: #ebe0dd;
  padding: 4px;
}

.line {
  padding: 8px;
  border-bottom: 1px solid $color5;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

<div class="content">
  <aside class="d-none d-md-block">
    <ul>
      <li class="first"><a href="#">All</a></li>
      <li><a href="#">To Pay</a></li>
      <li><a href="#">To Ship</a></li>
      <li><a href="#">To Receive</a></li>
      <li><a href="#">Completed</a></li>
      <li><a href="#">Cancelled</a></li>
    </ul>
  </aside>



  <div class="container-fluid p-3 m-5 item1" height="20">
    <div class="row">
      <div class=" col col-lg-1 text-center">
        <img src="/images/charrr.png" alt="" width="50">
      </div>

      <div class="col col-lg-10 my-2">
        <h5>Charlotte Folk</h5>
      </div>

      <div class="col col-lg-1 my-2 text-center">
        <h6>To Pay</h6>
      </div>
    </div>

    <div class="row">
      <div class=" col col-lg-1 text-center">
        <img src="/images/charlottewhite.jpg" alt="" width="80">
      </div>

      <div class="col col-lg-10">
        <h6>CFXXI Sweater</h6>
        <h6>Large</h6>
        <h6>x1</h6>
      </div>

      <div class="col col-lg-1 my-2 text-center">
        <h6>P990</h6>
      </div>
    </div>

    <div class="row">
      <div class="col-lg text-center bottom1"><a href="#">Contact Seller</a></div>
    </div>

  </div>


  <div class="container-fluid p-3 m-5 item2" height="20">
    <div class="row">
      <div class=" col col-lg-1 text-center">
        <img src="/images/charrr.png" alt="" width="50">
      </div>

      <div class="col col-lg-10 my-2">
        <h5>Charlotte Folk</h5>
      </div>

      <div class="col col-lg-1 my-2 text-center">
        <h6>To Pay</h6>
      </div>
    </div>

    <div class="row">
      <div class=" col col-lg-1 text-center">
        <img src="/images/charlottewhite.jpg" alt="" width="80">
      </div>

      <div class="col col-lg-10">
        <h6>CFXXI Sweater</h6>
        <h6>Large</h6>
        <h6>x1</h6>
      </div>

      <div class="col col-lg-1 my-2 text-center">
        <h6>P990</h6>
      </div>
    </div>

    <div class="row">
      <div class="col-lg text-center bottom1"><a href="#">Contact Seller</a></div>
    </div>

  </div>

</div>

Answer 1

只需将它们包裹在一个新的 div

中

.content {
  display:flex;
}

aside {
border-right: 1px solid #000000;
}

aside {
 height: 100vh;
 width: 350px;
}

aside ul {
 padding-top: 5%;
 list-style-type: none;
 text-align: center;
}

aside a {
 text-decoration: none;
 display: block;
 font-size: 23px;
 color: black;
 margin: 40px;
 font-family: $font1;
 font-weight: lighter;
}

aside a:hover {
 color: $color1;
}

.first {
  margin: 50px;
}
.first a {
  background-color: #ebe0dd;
  padding: 4px;
}

.line {
  padding: 8px;
  border-bottom: 1px solid $color5;
}

.rightDiv {
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--Link for Font awesome icons-->  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  

    <link rel="stylesheet" href="/styles/try.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

</head>
<body>

  <div class = "content">
    <aside class = "d-none d-md-block">
      <ul>
        <li class = "first"><a href="#">All</a></li>
        <li><a href="#">To Pay</a></li>
        <li><a href="#">To Ship</a></li>
        <li><a href="#">To Receive</a></li>
        <li><a href="#">Completed</a></li>
        <li><a href="#">Cancelled</a></li>
      </ul>
    </aside>
    
    
  <div class='rightDiv'>
    <div class="container-fluid p-3 item1" height = "20">
      <div class="row">
        <div class=" col col-lg-1 text-center">
          <img src="/images/charrr.png" alt="" width="50">
        </div>
  
        <div class="col col-lg-10 my-2">
          <h5>Charlotte Folk</h5>
        </div>
  
        <div class="col col-lg-1 my-2 text-center">
          <h6>To Pay</h6>
        </div>
      </div>
  
      <div class="row">
        <div class=" col col-lg-1 text-center">
          <img src="/images/charlottewhite.jpg" alt="" width="80">
        </div>
  
        <div class="col col-lg-10">
          <h6>CFXXI Sweater</h6>
          <h6>Large</h6>
          <h6>x1</h6>
        </div>
  
        <div class="col col-lg-1 my-2 text-center">
          <h6>P990</h6>
        </div>
      </div>
  
      <div class="row">
        <div class="col-lg text-center bottom1"><a href="#">Contact Seller</a></div>
      </div>
      
    </div>
  
    
  <div class="container-fluid p-3 item2" height = "20">
    <div class="row">
      <div class=" col col-lg-1 text-center">
        <img src="/images/charrr.png" alt="" width="50">
      </div>

      <div class="col col-lg-10 my-2">
        <h5>Charlotte Folk</h5>
      </div>

      <div class="col col-lg-1 my-2 text-center">
        <h6>To Pay</h6>
      </div>
    </div>

    <div class="row">
      <div class=" col col-lg-1 text-center">
        <img src="/images/charlottewhite.jpg" alt="" width="80">
      </div>

      <div class="col col-lg-10">
        <h6>CFXXI Sweater</h6>
        <h6>Large</h6>
        <h6>x1</h6>
      </div>

      <div class="col col-lg-1 my-2 text-center">
        <h6>P990</h6>
      </div>
    </div>

    <div class="row">
      <div class="col-lg text-center bottom1"><a href="#">Contact Seller</a></div>
    </div>
    
  </div>
  </div>
  
  </div>





  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>

Answer 2

保留 .content {display: flex} 但尝试为这两个价格列或您提到的两个容器添加一个新容器，然后添加此规则集 .your-class { display:flex; flex-direction: column; }

连续制作两个容器

making two containers in a row

html

css

sass