分享好友 前端技术首页 频道列表

不用table而实现等分DIV的方法

css教程  2015-08-09 19:530

第一种方式

html:

XML/HTML Code复制内容到剪贴板
  1. <div id="box">  
  2.     <div>  
  3.         <span>1</span>  
  4.         <span>2</span>  
  5.         <span>3</span>  
  6.     </div>  
  7.      <div>  
  8.         <span>4</span>  
  9.         <span>5</span>  
  10.         <span>6</span>  
  11.     </div>  
  12.      <div>  
  13.         <span>7</span>  
  14.         <span>8</span>  
  15.         <span>9</span>  
  16.     </div>  
  17. </div>  

csss:

CSS Code复制内容到剪贴板
  1. *{   
  2.     margin:0 auto;   
  3.     padding:0;   
  4. }   
  5. #box{   
  6.     height:200px;   
  7.     width:200px;   
  8.     border:1px solid red;   
  9. }   
  10. div div{   
  11.     width:100%;   
  12.     height:32.855%;   
  13. }   
  14. span{   
  15.     display:inline-block;   
  16.     height:100%;   
  17.     width:32%;   
  18.     border:1px solid blue;   
  19. }   
  20. #box span:nth-child(2n+2){   
  21.      border:1px solid red;   
  22.     margin-left:-7px;   
  23. }   
  24. #box span:nth-child(2n+3){   
  25.      border:1px solid green;   
  26.     margin-left:-7px;   
  27. }   

在线预览：https://jsfiddle.net/dwqs/wrj2xvhg/2/
第二种方式

可以考虑display的table、table-row和table-cell属性
html:

XML/HTML Code复制内容到剪贴板
  1. <div id="box">  
  2.     <div>  
  3.         <span>1</span>  
  4.         <span>2</span>  
  5.         <span>3</span>  
  6.     </div>  
  7.      <div>  
  8.         <span>4</span>  
  9.         <span>5</span>  
  10.         <span>6</span>  
  11.     </div>  
  12.      <div>  
  13.         <span>7</span>  
  14.         <span>8</span>  
  15.         <span>9</span>  
  16.     </div>  
  17. </div>  

css:

CSS Code复制内容到剪贴板
  1. *{   
  2.     margin:0 auto;   
  3.     padding:0;   
  4. }   
  5. #box{   
  6.     height:200px;   
  7.     width:200px;   
  8.     border:1px solid red;   
  9.     display:table;   
  10. }   
  11. div div{   
  12.     width:100%;   
  13.     display:table-row;   
  14. }   
  15. span{   
  16.     display:table-cell;   
  17.     border:1px solid blue;   
  18.     vertical-align:middle;   
  19.     text-align:center;   
  20. }  

在线预览：demo
第三种方式

利用css3的column-count布局
html:

XML/HTML Code复制内容到剪贴板
  1. <div id="box">  
  2.     <div id="first">  
  3.         人民网北京2月24日电 (记者 刘阳)国家发展改革委知，   
  4.     </div>  
  5.      <div>  
  6.          人民网北京2月24日电 (记者 刘阳)国家发展改革委知，   
  7.     </div>  
  8.      <div>  
  9.          人民网北京2月24日电 (记者 刘阳)国家发展改革委知，   
  10.     </div>  
  11. </div>  

css

CSS Code复制内容到剪贴板
  1. *{   
  2.     margin:0 auto;   
  3.     padding:0;   
  4. }   
  5. #box{   
  6.     height:200px;   
  7.     width:200px;   
  8.     border:1px solid red;   
  9. }   
  10. #box>div{   
  11.     width:100%;   
  12.     height:32.855%;   
  13.     border:1px solid blue;   
  14.     -moz-column-count:3; /* Firefox */  
  15.     -webkit-column-count:3; /* Safari and Chrome */  
  16.     column-count:3;   
  17.      -moz-column-rule:4px outset #ff0000; /* Firefox */  
  18.      -webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */  
  19.       column-rule:4px outset #ff0000;   
  20. }   
  21. #first{   
  22. }  

在线预览：column-count实现
但要注意的是，使用列布局时，其包含的内容本身的宽度必读大于等于容器宽度，在大于容器宽度时，会自行增加列数。

查看更多关于【css教程】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
table中cellspacing、cellpadding的css替代写法
table{border:0;margin:0;border-collapse:collapse;border-spacing:0;}/*控制cellspacing*/table td{padding:0;}/*控制cellpadding*/  说明：border-collapse : separate | collapse separate  :　 默认值。边框独立（标准HTML） collapse  :　 相邻边被

0评论2023-03-08469

ant design table td 超长时如何显示省略号 CSS实现单行、多行文本溢出显示省略号（…）
antd的table组件怎样合理控制每列宽度？table固定列的宽度,超出部分用…代替(针对普通table和antd)antDesign使用a-table时，设置某列的单元格内容不换行 CSS实现单行、多行文本溢出显示省略号（…）  

0评论2023-03-08864

html中使table设置固定宽度的列不改变
在开发中发现，有时设置table列的宽度，但是当页面的宽度变时，列宽还是会变，解决方法就是设置table的table-layout属性，设置成table-layout="fixed"就可以了，关于它的其他值，大家可以查查

0评论2023-03-08732

HTML Table 拼凑表格数据并支持滚动条
1 !DOCTYPE html 2 html xmlns="http://www.w3.org/1999/xhtml" 3 head 4 meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ 5 title/title 6 /head 7 body 8 div style="width:600px; height:60px; overflow:scroll;

0评论2023-03-08728

获取html table下元素
1.js 获取table下列表数据var table =document.getElementById ('yhwclwhjlList'); 　　　　//获取id为'yhwclwhjlList' 的tablevar rows = table.rows.length;　　　　//获取行数var colums=table.rows[0].cells.length;　　　　//获取的为第一行列数 //getE

0评论2023-03-08361

angular的table组件 angular 组件库
http://ju.outofmemory.cn/entry/128669

0评论2023-03-08711

bootstrap table 自动换行 和 响应式
 style="word-break:break-all; word-wrap:break-all;" table class="tabletable-striped" style="word-break:break-all; word-wrap:break-all;"trtdtitle/tdtd123456789111111111111111111111111111111/td/tr /table   响应式-进度条div class=&quo

0评论2023-03-08471

html5 bootstrap pannel table 协议 公告 声明 文书 模板
 !DOCTYPE HTMLhtml lang="zh-CN"headmeta charset="utf-8"/meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, u

0评论2023-03-08895

html5 jquery bootstrap table 直接使用
 !DOCTYPE htmlhtml lang="zh-CN"headmeta charset="utf-8"/meta http-equiv="X-UA-Compatible" content="IE=edge"/meta name="viewport" content="width=device-width,initial-scale=1.0"/meta name="key

0评论2023-03-08630

html5 jquery bootstrap table form input 导航 表格 响应式 表单 直接使用
!DOCTYPE HTMLhtml lang="zh-CN"headmeta charset="utf-8"/meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, us

0评论2023-03-08321

bootstrap datatable项目封装支持单选多选
自己在开发项目是根据自己的项目后台框架封装的jquery datatable插件基本上能集成到任何项目中使用，当然封装的还不够完美，给大家学习 调侃使用介绍：query_dataTable({table : "#data_table",query : "#query"});table id=data_table data-column="[{

0评论2023-03-08488

BootStrap table动态增删改表格内数据
1 1:添加一个【操作】列 23   45 { 6 title: "操作", 7 align: 'center', 8 valign: 'middle', 9 width: 160, // 定义列的宽度，单位为像素px10 formatter: function (value, row, index) { //传入数据11 return 'button class="btn btn-primary btn-sm" o

0评论2023-03-08995

更多推荐