一.早期多列问题
我们有时想布局成报纸、杂志那样的多列方式(至少两列,一般三列以上),但早期CSS 提供的布局方式都有着极大的限制。如果是固体布局,那么使用浮动或定位布局都可以完成。但对于流体的多列,比如三列以上,那只能使用浮动布局进行,而它又有极大的限制。
因为它是区块性的,对于动态的内容无法伸缩自适应,基本无能力。

//五段内容,分为三列
<div>
<p>我是第一段内容…省略的部分复制大量文本/p>
<p>我是第二段内容…省略的部分复制大量文本/p>
<p>我是第三段内容…省略的部分复制大量文本/p>
<p>我是第四段内容…省略的部分复制大量文本/p>
<p>我是第五段内容…省略的部分复制大量文本/p>
</div>
//带标题的五段内容,分为三列
<div>
<h4>第一段标题/h4>
<p>我是第一段内容…省略的部分复制大量文本/p>
<h4>第二段标题/h4>
<p>我是第二段内容…省略的部分复制大量文本/p>
<h4>第三段标题/h4>
<p>我是第三段内容…省略的部分复制大量文本/p>
<h4>第四段标题/h4>
<p>我是第四段内容…省略的部分复制大量文本/p>
<h4>第五段标题/h4>
<p>我是第五段内容…省略的部分复制大量文本/p>
</div></

本文探讨了CSS3中用于创建流体多列布局的columns属性,解决了早期布局方法的局限性。通过columns、column-width、column-count等属性,可以轻松实现动态调整列数和宽度,适应不同场景的需求。文章还举例说明了如何在Firefox中应用这些属性。

232

被折叠的 条评论
为什么被折叠?



