试图让容器 div 中的两个 parent div 显示在一行中，其中一个 parent div 重复多行而不影响第二个 parent

Question

我正在从头开始创建我的 WordPress 主题，这是出现在首页上的动态添加的帖子的模板。我也为此使用 bootstrap 5。

我有一个容器 div，其中包含一个 div，其中包含类别。博客文章本身不在 parent div 中，因为如果我把它放在 parent div 中，图像就会出现在文章标题上方。我正在尝试实现这种外观：

我如何获得这个结果，特别是如果我将文章图片和 article-related div 的其余部分放在 parent div 中？这样做的理想方式是什么？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

  <title>Test</title>
</head>

<body>

  <div class="row mx-0 mt-4" style="width: 800px;">

    <!-- Article Section -->


    <div class="col-12 col-md-2 ">
      <img src="https://i.ibb.co/xmMv1Sg/benaja-germann-c-Rc-ZLSE7h-Q-unsplash.jpg" class=" img-fluid mx-auto d-block pb-4 pb-md-0" alt="" style="height: 200px">
    </div>

    <div class="col-12 col-md-10 col-lg-7 pe-md-5 ">

      <div class="row ">

        <div>
          <div class="mb-1">Article Title</div>
        </div>

        <div>
          <div class=" mb-2">Date</div>
        </div>

        <div>
          <div class="mb-2 "> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repellat officiis aliquam cum praesentium illum quo dignissimos, assumenda rerum reiciendis, aspernatur voluptas! Molestiae alias odio expedita molestias quibusdam consequatur
            repudiandae.
          </div>
        </div>

        <div>
          <div>
            <a href="">Continue Reading</a>
          </div>
        </div>

      </div>

    </div>

    <!-- Category section -->
    <div class="col-3 d-none d-sm-none d-md-none d-lg-block " id="categoryContainer">
      <div>
        CATEGORIES
      </div>

      <a href="">
        <div class="row px-0 mx-0">
          <div class="col-auto me-auto px-0">Test</div>
          <div class="col-auto px-0">(10)</div>
        </div>
      </a>

      <hr class="my-0 ">

      <a href="">
        <div class="row px-0 mx-0">
          <div class="col-auto me-auto px-0">Test</div>
          <div class="col-auto px-0">(10)</div>
        </div>
      </a>

      <hr class="my-0 ">

      <a href="">
        <div class="row px-0 mx-0">
          <div class="col-auto me-auto px-0">Test</div>
          <div class="col-auto px-0">(10)</div>
        </div>
      </a>

      <hr class="my-0 ">

      <a href="">
        <div class="row px-0 mx-0">
          <div class="col-auto me-auto px-0">Test</div>
          <div class="col-auto px-0">(10)</div>
        </div>
      </a>

      <hr class="my-0 ">

      <a href="">
        <div class="row px-0 mx-0">
          <div class="col-auto me-auto px-0">Test</div>
          <div class="col-auto px-0">(10)</div>
        </div>
      </a>

    </div>

  </div>


  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</body>

</html>

^ 将代码段展开到整页以查看类别部分

Answer 1

给你...请看下面的片段。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  <title>Test</title>
  <style>
    #img {
      width: 100%;
    }
  </style>
</head>

<body>

  <div class='row w-100 d-flex justify-content-between'>
    <div class='col-8'>
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-4 p-4">
              <img id='img' src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg">
            </div>
            <div class="col-8 p-4">
              <div class="title mb-3">Article Title</div>
              <div class="date mb-2">Date</div>
              <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio neque debitis temporibus perspiciatis corporis eos voluptatum nam tempore itaque provident accusamus reiciendis, error ipsum magnam! Iste facilis nobis porro fuga.</div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="row">
            <div class="col-4 p-4">
              <img id='img' src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg">
            </div>
            <div class="col-8 p-4">
              <div class="title mb-3">Article Title</div>
              <div class="date mb-2">Date</div>
              <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio neque debitis temporibus perspiciatis corporis eos voluptatum nam tempore itaque provident accusamus reiciendis, error ipsum magnam! Iste facilis nobis porro fuga.</div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="row">
            <div class="col-4 p-4">
              <img id='img' src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg">
            </div>
            <div class="col-8 p-4">
              <div class="title mb-3">Article Title</div>
              <div class="date mb-2">Date</div>
              <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio neque debitis temporibus perspiciatis corporis eos voluptatum nam tempore itaque provident accusamus reiciendis, error ipsum magnam! Iste facilis nobis porro fuga.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-3 p-4">
      <div>CATEGORIES</div>
      <div>Category 1</div>
      <div>Category 2</div>
      <div>Category 3</div>
      <div>Category 4</div>
      <div>Category 5</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</body>

</html>

试图让容器 div 中的两个 parent div 显示在一行中，其中一个 parent div 重复多行而不影响第二个 parent

Trying to get two parent divs in a container div to display in a row with one of the parent divs repeating multiple rows without affecting 2nd parent

html

css

wordpress-theming

bootstrap-5