1. 方法一 : CSS3
<!DOCTYPE html> <html> <head> <style> .newspaper { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */ -moz-column-rule: 1px solid lightblue; /* Firefox */ column-rule: 1px solid lightblue; } </style> </head> <body> <p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule property.</p> <div class="newspaper"> 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. 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. 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. </div> </body> </html>
来源:http://www.w3schools.com/css/css3_multiple_columns.asp
参考:http://www.w3chtml.com/css3/properties/multi-column/
2. 方法二:jQuery
<div id="data" class="Column1" style="float:left;width:300px;"> <!-- data Start --> <p>This is paragraph 1. Lorem ipsum ...</p> <p>This is paragraph 2. Lorem ipsum ...</p> <p>This is paragraph 3. Lorem ipsum ...</p> <p>This is paragraph 4. Lorem ipsum ...</p> <p>This is paragraph 5. Lorem ipsum ...</p> <p>This is paragraph 6. Lorem ipsum ...</p> <p>This is paragraph 7. Lorem ipsum ...</p> <p>This is paragraph 8. Lorem ipsum ...</p> <p>This is paragraph 9. Lorem ipsum ...</p> <p>This is paragraph 10. Lorem ipsum ...</p> <p>This is paragraph 11. Lorem ipsum ...</p> <!-- data Emd--> </div> <div id="Column2" style="float:left;width:300px;"></div>
$(document).ready(function () { var size = $("#data > p").size(); $(".Column1 > p").each(function (index) { if (index >= size / 2) { $(this).appendTo("#Column2"); } }); });
原文:http://stackoverflow.com/a/3039054/4484798
demo:http://jsfiddle.net/dPUmZ/1/
或者使用插件:http://welcome.totheinter.net/columnizer-jquery-plugin/ 下载实例插件:Columnizer-jQuery-Plugin-master
相关推荐
主要介绍了浅谈CSS 多栏布局(Multi-Columns Layout)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
CSS 多栏(Multi-column) : http://www.w3chtml.com/css3/properties/multi-column/ Properties属性 CSS Version版本 Inherit From Parent继承性 Description简介 columns CSS3 无 CSS3 columns 属性,是复合...
如有使用疑问,联系博主 bootstrap-table-fixed-columns.css固定列 冻结列
Tailwind CSS插件,用于多列... link href =" https://cdn.jsdelivr.net/gh/markusantonwolf/tailwind-css-plugin-multi-columns/dist/multi-columns.min.css " rel =" stylesheet " >安装1.安装Tailwind CSS Multi
CSS3 The Missing Manual - CSS3 秘籍 - 第3版 Cascading Style Sheets—CSS for short—give you creative control over the layout and design of your web pages. Using CSS, you can dress up your site’s text...
兜兜转转一大圈,最后发现实现两端对齐布局方式最简单的居然是使用CSS columns多栏布局。 例如,我们想要实现3列元素两端对齐,中间间隙是30px,CSS代码为: .container { columns: 3 30px; } 叮咚,结束了,game ...
CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式...
Size table columns automatically Integrate CSS3 and JavaScript without embedding JavaScript in HTML5 Create drop caps, callouts, quotes, and alerts Who this book is for A software developer can use ...
Smart CSS Grid是基于CSS GRID的流体响应式布局系统,具有12列
CSS GuideBook 目录 基础概念 属性 布局 基础布局 内联块级布局 文档流布局 定位布局 浮动布局 清除浮动 弹性布局 表格布局 居中布局 水平居中 垂直居中 水平垂直居中 多栏布局 双栏布局 三栏布局 多栏布局 网格布局...
css命名规范 1.一律小写;... 主要的 master.css 模块 module.css 基本共用 base.css 布局,版面 layout.css 主题 themes.css 专栏 columns.css 文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css
npm install tailwindcss-multiple-columns --save-dev 纱 yarn add tailwindcss-multiple-columns -D 用法 配置 将插件添加到您的tailwind.config.js (如上所述安装后)。 // tailwind.config.js module . ...
Fixed Size Text Columns介绍: 用WebView来实现具有固定列宽的文字排版形式,支持用pinch手势放大或缩小文字。Demo显示了用两列来排版文章。 测试环境: Eclipse 4.2, Android 3.0 以上。 注意:测试环境并...
fastadmin 表格添加固定表头 bootstrap-table-fixed-columns所需插件
学习:自适应布局,Grid实现响应式布局特性:repeat(), fr, auto-fit, minmax()配合使用,只需要一行css即可搞定,比如:grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 源码:下载
编号 ... columns, col, c25, c33, c50, c66, c75 Colors classes: black, white, default, success, warning, error, info, transparent Effect classes: accordion, close Other classes: fill
css | ellipsis xbl xml | ui jqgrid css js | i18n | grid locale en js | grid locale cn js | grid locale js | Changes txt | install txt | jquery jqGrid min js | jquery jqGrid src js | jquery 1 9 0 min ...
bootstrap-table拖拽需要dragtable.css,jquery.dragtable.js,jquery-ui.js,bootstrap-table-reorder-columns.js
grid-template-columns grid-gap 使用此脚本可以轻松地将CSS网格从一种状态优雅地过渡到另一种状态。 如果网格的内容发生更改,或者通过添加或删除类来更新网格或其子级之一,则网格将自动过渡到其新配置。 如何...