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

Question

我正在 WordPress 上写博客文章。我想要的是博客的内容应该位于帖子缩略图旁边，当图像结束时，内容应该自动覆盖其余区域，我的意思是它应该从左侧的图像下方开始？这是输出图像：

在这张图片中，我使用了 Bootstrap 的网格系统，缩略图有 6 列，内容有 6 列，这是可以的，但我希望内容自动填充图像下的其余空间？如何使用 CSS 或 Bootstrap 来实现它？

Answer 1

由于您正在使用引导程序。这在当前的设置下是不可能做到的。将其设置为 50% 的 2 列，其中图像显示在另一列中，所有文本/内容显示在另一列中，就像您拥有的一样。您可能需要将其设置为 col 或 col-12 并在同一区域中添加图像/文本。想想带有图像对齐功能的老式 WordPress 内容编辑器。这是一个您可以模仿以使文本换行的示例。jsfiddle 是一个工作示例。<div class="container">&nbsp; <div class="row">&nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; 1 of 2&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; 2 of 2&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="row">&nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/150">&nbsp; &nbsp; &nbsp; Text goes here&nbsp; &nbsp; </div>&nbsp; </div></div>https://jsfiddle.net/bazdin/kmn4u8xd/1/

Answer 2

你可以这样做 -超文本标记语言<div class="container">&nbsp; <div class="row">&nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; <img class= "pull-left" style="margin: 0px 10px 0px 0px;" src="https://via.placeholder.com/150" width = "150">&nbsp; &nbsp; &nbsp; <h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; My Text Heading&nbsp; &nbsp; &nbsp; </h1>&nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; 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.&nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; </div>&nbsp; </div></div>小提琴https://jsfiddle.net/guruling/xeyLk1qb/1/