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专栏真棒！ I made a demo also (click).

对于旧版浏览器，您需要使用javascript。看看Masonry，Isotope和Packery。

Answer 2

使用css column-count或columns。

IE 9及更早版本不支持列计数属性。

CSS：

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

OR

.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>

将单个div标记分为3个部分

2 个答案: