水平放置带有浮动文本的段落

Question

我正在尝试通过HTML / CSS实现以下目标：

文本将来自Wordpress帖子，因此不能使用任何特殊格式。帖子内容必须带有普通的if标签。

不确定从哪里开始，因为文本也将根据不同的屏幕尺寸自动浮动。

<p>

不确定仅使用HTML / CSS而不修改原始帖子内容是否可行？

Answer 1

不确定以下内容是否是您真正要寻找的内容，但是使用column-count规则可以很容易地跨越多个列。只需将数字更改为所需的列数即可。

.wrapper {
  -webkit-column-count: 2;
  -moz-column-count: 2; 
  column-count: 2;
}

h1 {
  -webkit-column-span: all; /* Chrome, Safari, Opera */
  column-span: all;
}

<div class="wrapper">
  <h1>How to make text span over multiple columns</h1>
  <p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
  </p>
</div>

Answer 2

不确定这是否是您要寻找的东西，但我认为css columns是您要走的路。

.text {
  column-count: 2;
  column-gap: 20px;
}