Bootstrap：如何通过文本换行和响应使图像向右浮动？

Question

我现在正在使用 Bootstrap 并设计一个网页，其中包含一篇包含多张图片的文章。向左浮动的那些工作得很好。

为了让图片浮在右边，我试过了：

1. 为图像分配浮动右类（没有解释根本不起作用）
2. 为图像周围的文本提供一个单独的列（文本不会在底部环绕图像）
3. 将 order-1 和 order-12 类分配给它们各自的元素（失败而没有解释）（“各自的元素”是指第一个 col div 和之后包含文本的

   标记）

这就是我的代码的样子：

<div class="row">
  <div class="col-lg-5 col-md-4 col-sm-12">
    <img src="resources/pic.jpg" width="100%" />
    <p>
      caption for photo here
    </p>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Answer 1

在我看来，CSS shape-outside 非常适合这种布局，不幸的是，它还没有 100% 准备好，但我们可以尝试另一种方式。

float: left; 或 float: right; 无论您对图像支架元素或图像本身使用什么，请始终将图像或图像支架放在文本（或文本支架元素）之前。

现在，您必须在图片或图片支架中使用float（left 或right）只能，不能 在文本或文本持有者中。请参阅下面的 sn-p 以获得更好的理解-

img {max-width: 100%}

.the_article {
    width: 500px;
    margin: 30px auto;
}

.img-right {
    width: 300px;
    float: right;
    margin: 0 15px 0;
}

.img-left {
    width: 300px;
    float: left;
    margin: 0 15px 0;
}

<div class="the_article">
    <figure class="img-right">
        <img src="https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
    </figure>
    <section>
        <h2 style="text-align: right;">Lorem ipsum dolor sit amet.</h2>
        <p style="text-align: right;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim a nihil velit exercitationem adipisci hic? Praesentium quisquam odit earum eaque deserunt saepe repellat fugiat consequatur sint eveniet perspiciatis libero dolorem numquam commodi, rerum corporis, facere, similique consectetur itaque error! Eveniet qui ab odit ipsam! Magnam excepturi saepe quasi alias recusandae aliquid numquam odio nihil, natus reprehenderit deleniti. Accusamus maxime eum nihil ipsa dolorem? Modi, nihil! Rerum maxime fugiat, nemo doloremque sunt illum iusto molestiae, incidunt ad nulla quos dignissimos iure modi veritatis deserunt nisi. Dolorum fuga deserunt voluptates nisi officia consectetur et asperiores quam minus nulla odit veniam laborum repudiandae culpa, impedit, perferendis totam voluptate tenetur esse quo libero exercitationem consequatur reprehenderit quae. Eum in exercitationem odio et. Nam facere eos necessitatibus ad, nisi cum quidem, in maxime inventore nulla soluta ipsa assumenda reprehenderit, veritatis modi dolorem laborum. Fugiat sequi labore eligendi consequuntur perspiciatis accusamus? Tempora obcaecati inventore similique sed.</p>
    </section>
    <figure class="img-left">
        <img src="https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
    </figure>
    <section>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim a nihil velit exercitationem adipisci hic? Praesentium quisquam odit earum eaque deserunt saepe repellat fugiat consequatur sint eveniet perspiciatis libero dolorem numquam commodi, rerum corporis, facere, similique consectetur itaque error! Eveniet qui ab odit ipsam! Magnam excepturi saepe quasi alias recusandae aliquid numquam odio nihil, natus reprehenderit deleniti. Accusamus maxime eum nihil ipsa dolorem? Modi, nihil! Rerum maxime fugiat, nemo doloremque sunt illum iusto molestiae, incidunt ad nulla quos dignissimos iure modi veritatis deserunt nisi. Dolorum fuga deserunt voluptates nisi officia consectetur et asperiores quam minus nulla odit veniam laborum repudiandae culpa, impedit, perferendis totam voluptate tenetur esse quo libero exercitationem consequatur reprehenderit quae. Eum in exercitationem odio et. Nam facere eos necessitatibus ad, nisi cum quidem, in maxime inventore nulla soluta ipsa assumenda reprehenderit, veritatis modi dolorem laborum. Fugiat sequi labore eligendi consequuntur perspiciatis accusamus? Tempora obcaecati inventore similique sed.</p>
    </section>
</div>