这个网页用html和css怎么实现，几个表格或者区块可以自由堆砌，且分成2列，求思路方法或者代码？

html-css024

这个网页用html和css怎么实现，几个表格或者区块可以自由堆砌，且分成2列，求思路方法或者代码？,第1张

用css3可以轻松实现，只需要使用一个属性column-count即可，比如：

<style>

div.mcol {

-moz-column-count:2 /* Firefox */

-webkit-column-count:2 /*Safari 和 Chrome*/

column-count:2 /*设为2列*/

}

</style>

<div class=mcol>

要分列显示的内容放在这里

</div>

请注意：

Internet Explorer 10+ 和 Opera 支持 column-count 属性。

Firefox 支持替代的 -moz-column-count 属性。

Safari 和 Chrome 支持替代的 -webkit-column-count 属性。

Internet Explorer 9 以及更早版本的IE浏览器不支持 column-count 属性。

如果是手机网站的代码则完全没问题！

此外，利用column-gap可设置列之间的间隔

PS. 列中的内容最好不要设置绝对宽度，而应该设置为百分数，比如 width:100% 就表示占用整个列宽（注意不是整个屏幕的宽度）

1、用一个div包含两个p标签，给p标签设置小于div一半的宽度（中间有间隔）并添加左浮动和右浮动（类似两篇文章左右各一篇）；

2、如果是一段文字分左右两列显示，注意是“两列”，这个需要用css3的里面的column，具体方法可直接百度“css3 分列布局”；

两种不同方法看你需要哪个

有用的话记得采纳哦，谢谢！！！

多列布局，可以实现如传统报刊一样的分栏排版方式。

多列布局有3个主要属性: column \column-gap\column-rule.

Column是column-count和column-width的简写属性。

column-count指定列数，column-width指定列宽。

如果同时指定了列数和列宽，则以较宽的一项为准。

Column-gap指定列间距，默认值为normal，即1em的间隙；

还可以用通过Column-rules指定列分隔线，此属性接受与 border 属性相同的值。

多列布局还能实现指定分列、跨列、平衡列内容等特性。

利用分栏还可以实现很多效果。

想直观的看到效果，你可以多看看相关的教程，比如说现在有个视频的系列名称叫做 《Buid New World》，里面有一集专门讲 CSS3 复杂布局形式