0
A
回答
1
您可以使用CSS列:
div {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 20px; /* Chrome, Safari, Opera */
-moz-column-gap: 20px; /* Firefox */
column-gap: 20px;
}
<div>
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>
当前浏览器支持: http://caniuse.com/#feat=multicolumn
3
.col {
-webkit-column-count: 2;
-webkit-column-gap: 40px;
-webkit-column-rule: 1px solid #ccc;
-moz-column-count: 2;
-moz-column-gap: 40px;
-moz-column-rule: 1px solid #ccc;
column-count: 2;
column-gap: 40px;
column-rule: 1px solid #ccc;
}
.col h1, .col h2, .col h3, .col h4, .col h5, .col h6 {
-webkit-column-span:all;
-moz-column-span:all;
column-span:all;
}
<div class='col'>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
相关问题
- 1. 如何使用css将图像响应分成两个div块?
- 2. 将CSS按钮分成两列
- 3. CSS如何将包含div列表的div分割成2列
- 4. 动态左和固定右列宽div使用css
- 5. 使用php和javascript生成动态CSS
- 6. 如何将一个div分成多个行和列的CSS?
- 7. 用CSS分隔两个div
- 8. 将列分成两部分
- 9. 将列表分成两列
- 10. 将2列分成两列
- 11. 使用CSS动态控制两个内部div的大小
- 12. CSS将一个响应式圆形div分割成两半
- 13. 如何使用sql查询动态分组和动态分列?
- 14. 如何将html页面分成2个静态div和1个可滚动div?
- 15. 如何使用css和html将这两个Div变成这些形状?
- 16. 如何使用jQuery和jsp生成动态下拉列表?
- 17. CSS:一行中有两个div,动态(左)和固定(右)宽度。在动态div上使溢出文本
- 18. 使用JQuery和CSS扩展/缩小Div
- 19. 用jQuery滑动两个DIV
- 20. 添加新的CSS类动态生成的图像和div在jquery
- 21. jquery动态列表生成
- 22. 动态调整div为使用css扩展列表
- 23. DIV-only两列CSS布局
- 24. 使用DIV和CSS
- 25. 将文本分成两列,用PHP
- 26. 添加内嵌样式动态生成的div使用jQuery
- 27. 无法使用jQuery选择div(动态生成)
- 28. jquery:动态分配div高度
- 29. 用jQuery动态创建div
- 30. 如何使用CSS将页面分成两半?
这个插件很不错,可以完成这项工作。 http://welcome.totheinter.net/columnizer-jquery-plugin/ – 2014-09-30 12:53:11