CSS3流体多列布局columns属性

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

一.早期多列问题

我们有时想布局成报纸、杂志那样的多列方式(至少两列,一般三列以上),但早期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>第五段标

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值