图像结束后，如何让内容出现在图像旁边和图像下方？

Question

我正在使用 wordpress 开发我的博客 post。我想要的是博客的内容应该在 post 缩略图旁边，当图像结束时内容应该自动覆盖其余区域我的意思是它应该从左边的图像下方开始？这是输出图像：

这张照片我使用了 bootstrap 的网格系统，缩略图有 6 列，内容有 6 列，这没问题，但我希望内容自动填充 space 在图片下面？如何使用 CSS 或 Bootstrap 实现它？

Answer 1

因为您正在使用 bootstrap。这是不可能用它当前的设置来做的。

将其设置为 50% 的 2 列，其中一列为图像，另一列为所有 text/content，将会像您拥有的那样显示。

您可能需要将其设置为 col 或 col-12，并在同一区域添加 image/text。

想想带有图像对齐功能的老派 WordPress 内容编辑器。

这是一个您可以模仿以让文本换行的示例。 jsfiddle 是一个工作示例。

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      <img src="https://via.placeholder.com/150">
      Text goes here
    </div>
  </div>
</div>

https://jsfiddle.net/bazdin/kmn4u8xd/1/

Answer 2

你可以做到 -

HTML

<div class="container">
  <div class="row">
    <div class="col">
      <img class= "pull-left" style="margin: 0px 10px 0px 0px;" src="https://via.placeholder.com/150" width = "150">
      <h1>
          My Text Heading
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum ultrices mauris eu eleifend. Cras ut nisl lectus. Cras posuere maximus lectus, nec volutpat tellus sodales sit amet. Ut imperdiet imperdiet mauris quis convallis. Nunc erat lacus, faucibus laoreet justo ac, suscipit pulvinar sapien. Fusce id augue ut mauris molestie consectetur. Praesent eget volutpat quam, at ultricies dui. Pellentesque nec augue pharetra ex faucibus sollicitudin sit amet nec diam. Integer ut neque in arcu suscipit condimentum sit amet malesuada diam. Aliquam auctor sapien eros, ac mollis tortor fermentum sit amet.

Duis sed sagittis nulla. Aliquam vitae sodales ante. Aliquam id mattis metus. Suspendisse ultrices nunc ac urna mattis, finibus porta nibh luctus. Mauris condimentum magna a dui tempor, ut consequat mauris euismod. In vel commodo purus, vel luctus erat. Praesent consectetur auctor mattis. Morbi ac ultrices justo. Morbi posuere iaculis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc id mauris nisi.

Fusce sit amet massa sed risus malesuada feugiat ut ac purus. Praesent rhoncus quam nibh, nec sagittis orci dignissim quis. Donec vel venenatis nisl. Donec ultrices ante sed tempus ultrices. Maecenas eget suscipit lectus. Cras sodales, est vel finibus venenatis, mi est consectetur nulla, euismod varius massa turpis eget ante. Praesent et elit malesuada, porta nulla sed, luctus massa. Mauris nec justo mollis, porta arcu porta, convallis ante.
      </p>
    </div>

  </div>
</div>

Fiddle

https://jsfiddle.net/guruling/xeyLk1qb/1/

图像结束后，如何让内容出现在图像旁边和图像下方？

How can I allow the content to be appear beside the image and under the image also after the image ends?

html

css

wordpress

bootstrap-4

text-alignment