html - 如何将 Bootstrap div 彼此对齐，如果有额外的空间在那里扩展

Question

我有两个图像和两个相邻的段落，我使用了代码中所示的方法，并且效果很好。当我将两个图像的高度设置为 400px 时会出现问题，这样如果段落占用的空间超过 400px，它应该占用图像周围的空间。它在移动 View 中运行良好，但在桌面 View 中不起作用。在下图中，请将 div 2 和 4 视为段落，将 div 1 和 3 视为图像。

我希望它看起来像这样:

如果段落很长，我希望段落占据 100% 的空间，然后与 div 3 和 4 相同。
这是我的代码:

<div class="col-11">
    <div style="margin-left:10px;margin-right:10px;">
  {% for news in news %}
  <h1 class="text-center" style="color: black; margin-top:20px; font-size:50px;">{{news.title}}</h1>
  <div class="row g-2">
  <div class="col-12 col-md-6 order-2 order-md-1" style="color: #025; margin-top:20px; font-size:20px;">
    {% if news.para_one %}
    <p>{{news.para_one|safe}}</p>
    {% endif %}
  </div>
  <div class="col-12 col-md-6 order-1 order-md-2">
      {% if news.image %}
    <img src="{{news.image.url}}" alt="" class="img" style="height: 400px; width:650px;">
    {% endif %}
  </div>
  </div>
  <div class="detail" style="color: #025; margin-top:20px; font-size:20px;">
    {% if news.para_two %}
    <p >{{news.para_two|safe}}</p>
    {% endif %}
  </div>
  <div class="col-12">
    {% if news.disclaimer %}
    <p style="border:1px solid #025; border-top: 5px solid #025; font-size:20px; font-weight:700">Disclaimer :<span style="font-weight: 500;">{{news.disclaimer}}</span></p>
    {% endif %}
  </div>
  <div style="margin-bottom: 20px;">
    <p style="margin-left:10px; font-size :25px; font-weight:700;">Written By : <span style="color: #025;">{{news.written_by}}</span> </p>
    <p style="margin-left:10px; font-size :25px; font-weight:700;">Date & Time: <span style="color: #025;">{{news.joined_date}}</span> </p>
  </div>
  {% endfor %}

CSS:

.col-11{
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  background-color: #fff;
}
.row > .col-md-6:last-child:nth-child(odd) {
  width: 100%;
}
@media screen and (max-width: 600px) {
  .img{
    height: 200px !important;
    width: 100% !important;
  }
}

我试过这个解决方案 https://stackoverflow.com/a/68943035/14777930
但也许这不是我要找的。
请不要介意这些标记所有数据都是从数据库中获取的。任何帮助，将不胜感激。

Answer 1

就像其他人说的，您可以使用 float您图像上的属性。但是请不要为此编写自定义 css，只需使用 bootstrap 的 float utils class反而。在您的情况下，您应该添加类 float-lg-end到您的形象，使其成为float: right在大屏幕上:

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

<div class="col-11">
  <div style="margin-left:10px;margin-right:10px;">
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="float-lg-end" style="width: 200px;" />
    <p>Lorem ipsum dolor sit amet, consetetur sa dipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</div>

在整页页面中打开代码段并调整浏览器大小以查看行为。