html - 将单个 div 标签分为 3 个部分

Question

本质上，我想要的是页面上的 3 个部分。会有一个包含内容的 div 元素。问题是，让 div 分成 3 块，有点像报纸，一旦内容到达底部，它就会环绕并进入下一个盒子。

没有代码，我还没有开始。

编辑：我想制作专栏

Answer 1

CSS 列：https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts

例子：

.columns-3 {
  column-count:3;
  -webkit-column-count:3;
  -moz-column-count:3;
}

<div class="columns-3">Lorem ipsum dolor sit amet, consectetur adipisicing 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</div>

CSS 列太棒了！我也做了一个演示（点击）。

对于较旧的浏览器，您将需要 javascript。查看砌体、同位素和包装。

Answer 2

使用 csscolumn-count或columns.

IE 9 和更早版本不支持 column-count 属性。

CSS：

.columns{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}

或者

.columns{
columns:3;
-webkit-columns:3; /* Safari and Chrome */
-moz-columns:3; /* Firefox */
}

HTML

<div class="columns">
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.
</div>