搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

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

发布时间：2023-01-16 13:07:56 来源：网络
.
积极的人在每一次忧患中都看到一个机会，而消极的人则在每个机会都看到某种忧患。

第一种方式

html:

XML/HTML Code复制内容到剪贴板
  1. <divid="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:0auto;
  3. padding:0;
  4. }
  5. #box{
  6. height:200px;
  7. width:200px;
  8. border:1pxsolidred;
  9. }
  10. divdiv{
  11. width:100%;
  12. height:32.855%;
  13. }
  14. span{
  15. display:inline-block;
  16. height:100%;
  17. width:32%;
  18. border:1pxsolidblue;
  19. }
  20. #boxspan:nth-child(2n+2){
  21. border:1pxsolidred;
  22. margin-left:-7px;
  23. }
  24. #boxspan:nth-child(2n+3){
  25. border:1pxsolidgreen;
  26. margin-left:-7px;
  27. }

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

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

XML/HTML Code复制内容到剪贴板
  1. <divid="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:0auto;
  3. padding:0;
  4. }
  5. #box{
  6. height:200px;
  7. width:200px;
  8. border:1pxsolidred;
  9. display:table;
  10. }
  11. divdiv{
  12. width:100%;
  13. display:table-row;
  14. }
  15. span{
  16. display:table-cell;
  17. border:1pxsolidblue;
  18. vertical-align:middle;
  19. text-align:center;
  20. }

在线预览：demo
第三种方式

利用css3的column-count布局
html:

XML/HTML Code复制内容到剪贴板
  1. <divid="box">
  2. <divid="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:0auto;
  3. padding:0;
  4. }
  5. #box{
  6. height:200px;
  7. width:200px;
  8. border:1pxsolidred;
  9. }
  10. #box>div{
  11. width:100%;
  12. height:32.855%;
  13. border:1pxsolidblue;
  14. -moz-column-count:3;/*Firefox*/
  15. -webkit-column-count:3;/*SafariandChrome*/
  16. column-count:3;
  17. -moz-column-rule:4pxoutset#ff0000;/*Firefox*/
  18. -webkit-column-rule:4pxoutset#ff0000;/*SafariandChrome*/
  19. column-rule:4pxoutset#ff0000;
  20. }
  21. #first{
  22. }

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

本文不用table而如何实现等分DIV的方法到此结束。提高和成长的过程总是有许多的困难与坎坷的。有时我们是由于志向不明，没有明确的目的而碌碌无为。可是还有另外一种情景，是由于我们自我的退缩，与自我“亲密”的妥协没有坚持到底的意志，才使得机会逝去，颗粒无收。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章:
标签： table
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图