第一种方式
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实现
但要注意的是，使用列布局时，其包含的内容本身的宽度必读大于等于容器宽度，在大于容器宽度时，会自行增加列数。
最新文章
热门文章
猜你喜欢
