Trick:不用table，怎么等分DIV

桃扇骨 2022-08-05 02:27 115阅读 0赞

在SF上，有人提出一个问题：不用table，如何把Div分成3行\*3列。提供了三种思路：

#### 第一种方式 ####

html:

csss:

*{ margin:0 auto; padding:0; }
    #box{ height:200px; width:200px; border:1px solid red; }
    div div{ width:100%; height:32.855%; }
    span{ display:inline-block; height:100%; width:32%; border:1px solid blue; }
    #box span:nth-child(2n+2){ border:1px solid red; margin-left:-7px; }
    #box span:nth-child(2n+3){ border:1px solid green; margin-left:-7px; }

在线预览：[https://jsfiddle.net/dwqs/wrj2xvhg/2/][https_jsfiddle.net_dwqs_wrj2xvhg_2]

#### 第二种方式 ####

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

css:

*{ margin:0 auto; padding:0; }
    #box{ height:200px; width:200px; border:1px solid red; display:table; }
    div div{ width:100%; display:table-row; }
    span{ display:table-cell; border:1px solid blue; vertical-align:middle; text-align:center; }

在线预览：[demo][]

#### 第三种方式 ####

利用css3的column-count布局  
html:

<div id="box">
        <div id="first">
            人民网北京2月24日电 (记者 刘阳)国家发展改革委知，
        </div>
         <div>
             人民网北京2月24日电 (记者 刘阳)国家发展改革委知，
        </div>
         <div>
             人民网北京2月24日电 (记者 刘阳)国家发展改革委知，
        </div>
    </div>

css

*{ margin:0 auto; padding:0; }
    #box{ height:200px; width:200px; border:1px solid red; }
    #box>div{ width:100%; height:32.855%; border:1px solid blue; -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; -moz-column-rule:4px outset #ff0000; /* Firefox */ -webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */ column-rule:4px outset #ff0000; }
    #first{ }

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

原文链接：[http://www.ido321.com/1562.html][http_www.ido321.com_1562.html]

ps:原文下方的评论给出第四种方式。

[https_jsfiddle.net_dwqs_wrj2xvhg_2]: https://jsfiddle.net/dwqs/wrj2xvhg/2/
[demo]: https://jsfiddle.net/dwqs/mqqwjpkv/1/
[column-count]: http://jsfiddle.net/dwqs/9Lsdupz2/
[http_www.ido321.com_1562.html]: http://www.ido321.com/1562.html