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

时间：2021-05-08

第一种方式

html:

XML/HTML Code复制内容到剪贴板
  • <divid="box">
  • <div>
  • <span>1</span>
  • <span>2</span>
  • <span>3</span>
  • </div>
  • <div>
  • <span>4</span>
  • <span>5</span>
  • <span>6</span>
  • </div>
  • <div>
  • <span>7</span>
  • <span>8</span>
  • <span>9</span>
  • </div>
  • </div>

    • csss:

    CSS Code复制内容到剪贴板
  • *{
  • margin:0auto;
  • padding:0;
  • }
  • #box{
  • height:200px;
  • width:200px;
  • border:1pxsolidred;
  • }
  • divdiv{
  • width:100%;
  • height:32.855%;
  • }
  • span{
  • display:inline-block;
  • height:100%;
  • width:32%;
  • border:1pxsolidblue;
  • }
  • #boxspan:nth-child(2n+2){
  • border:1pxsolidred;
  • margin-left:-7px;
  • }
  • #boxspan:nth-child(2n+3){
  • border:1pxsolidgreen;
  • margin-left:-7px;
  • }

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

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

    XML/HTML Code复制内容到剪贴板
  • <divid="box">
  • <div>
  • <span>1</span>
  • <span>2</span>
  • <span>3</span>
  • </div>
  • <div>
  • <span>4</span>
  • <span>5</span>
  • <span>6</span>
  • </div>
  • <div>
  • <span>7</span>
  • <span>8</span>
  • <span>9</span>
  • </div>
  • </div>

    • css:

    CSS Code复制内容到剪贴板
  • *{
  • margin:0auto;
  • padding:0;
  • }
  • #box{
  • height:200px;
  • width:200px;
  • border:1pxsolidred;
  • display:table;
  • }
  • divdiv{
  • width:100%;
  • display:table-row;
  • }
  • span{
  • display:table-cell;
  • border:1pxsolidblue;
  • vertical-align:middle;
  • text-align:center;
  • }

    • 在线预览：demo
    第三种方式

    利用css3的column-count布局
    html:

    XML/HTML Code复制内容到剪贴板
  • <divid="box">
  • <divid="first">
  • 人民网北京2月24日电(记者刘阳)国家发展改革委知，
  • </div>
  • <div>
  • 人民网北京2月24日电(记者刘阳)国家发展改革委知，
  • </div>
  • <div>
  • 人民网北京2月24日电(记者刘阳)国家发展改革委知，
  • </div>
  • </div>

    • css

    CSS Code复制内容到剪贴板
  • *{
  • margin:0auto;
  • padding:0;
  • }
  • #box{
  • height:200px;
  • width:200px;
  • border:1pxsolidred;
  • }
  • #box>div{
  • width:100%;
  • height:32.855%;
  • border:1pxsolidblue;
  • -moz-column-count:3;
  • -webkit-column-count:3;
  • column-count:3;
  • -moz-column-rule:4pxoutset#ff0000;
  • -webkit-column-rule:4pxoutset#ff0000;
  • column-rule:4pxoutset#ff0000;
  • }
  • #first{
  • }

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

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章