HTML5+CSS3+JS学习笔记-13-CSS3多列

最新推荐文章于 2023-03-14 15:50:30 发布
最新推荐文章于 2023-03-14 15:50:30 发布
阅读量325 收藏
点赞数
分类专栏： Html5 文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xionghui2007/article/details/54143006
版权

今天学了CSS3多列的用法，文字内容也可以分列显示。


截图：



代码：

<!DOCTYPE HTML>
<html>


<head>
<meta charset="utf-8">
<title>CSS3多列</title>
<style type="text/css">
/*column-count 属性指定了需要分割的列数;
 column-gap 属性指定了列与列间的间隙;
 column-rule-style 属性指定了列与列间的边框样式;
 column-rule-width 属性指定了两列的边框厚度;
 column-rule-color 属性指定了两列的边框颜色;
 column-rule 属性是 column-rule-* 所有属性的简写。
*/

div {
-webkit-column-count: 3;
/* Chrome, Safari, Opera */
-moz-column-count: 3;
/* Firefox */
column-count: 3;
-webkit-column-gap: 40px;
/* Chrome, Safari, Opera */
-moz-column-gap: 40px;
/* Firefox */
column-gap: 40px;
-webkit-column-rule-style: solid;
/* Chrome, Safari, Opera */
-moz-column-rule-style: solid;
/* Firefox */
column-rule-style: solid;
-webkit-column-rule-width: 2px;
/* Chrome, Safari, Opera */
-moz-column-rule-width: 2px;
/* Firefox */
column-rule-width: 2px;
-webkit-column-rule-color: red;
/* Chrome, Safari, Opera */
-moz-column-rule-color: red;
/* Firefox */
column-rule-color: red;
-webkit-column-rule: 3px solid red;
/* Chrome, Safari, Opera */
-moz-column-rule: 3px solid red;
/* Firefox */
column-rule: 3px solid red;
-webkit-column-width: 100px;
/* Chrome, Safari, Opera */
column-width: 100px;
}
</style>
</head>


<body>
<div>测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234</div>
</body>


</html>

PandaCode辉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5+CSS3学习笔记2
xiaohua307的博客
02-16 174
选择器 1.ul li:first-child{}第一个孩子 2.ul li:last-child{}最后一个孩子 3.ul li:nth-child(1){}第几个孩子 odd奇数 even偶数 4.ul li:only-child{}只有一个孩子 5.h1:first-of-type{}第一个兄弟 6.h1:last-of-type{}最后一个兄弟 7.h1:nth-of-type(1){}第几个兄弟 8.h1:only-of-type{}只有一个兄弟 9.div:not(".text"...
HTML+CSS----------HTML5+CSS3
qq_31913969的博客
09-04 974
html回忆录 1、网页的组成：图片、文字、超链接、视频、音频等 2、网页中web标准三层组成:结构(html)、表现(css)、行为(JS). 3、Chrome浏览器的内核：Blink；苹果内核：webkit; 4、HTML是超文本标记语言，是描述网页的一种语言，是一种标记，不是一种语言，是一套标记标签。 5、超文本指的是超越文本的限制，超级文本链接 6、内核渲染HTML和CSS 7、 8、 ...
html中如何多列布局,CSS3 多列布局
weixin_33028765的博客
06-26 683
CSS3 多列布局使用CSS3，您可以将元素的文本内容分成多列。创建多列布局CSS3引入了多列布局模块，用于以简单有效的方式创建多个列布局。现在，您无需使用浮动框即可创建像在杂志和报纸上看到的布局。这是一个使用CSS3多列布局功能将一些文本分为三列的简单示例。示例p{-webkit-column-count:3;/*Chrome,Safari,Opera*/-moz-column-c...
在html中将多个div进行多行多列分布时
qq_69413049的博客
03-14 2193
通过改变各部分的宽高来设置div在盒子中的分布
html5内容分列,Html5+CSS3基础知识汇总-CSS3篇
weixin_42506994的博客
06-05 294
CSS选择器：使用CSS对html页面中的元素实现一对一，一对多或者多对一的控制：1.属性选择器在CSS3中追加了三个选择器:[att*=val];[att^=val];[att$=val]–>att表示为属性，val表示为属性的属性值。[att*=val]:如果元素用att表示的属性的值中包含val指定的字符，那么该元素使用这个样式。[att$=val]:如果元素用att表示的属性的属性值...
html表格设计（分列，设置边框）
weixin_44074105的博客
04-14 6127
先放一段代码，展示效果，再详细解释。 <html> <body> <table border = "1px" cellspacing = "0px" width = "800px"> <tr> <th colspan="2">姓名</th> <td colspan="3" style="background-color:#f5f5f0;">Rhett Butler<
HTML页面中使两个div并排显示
热门推荐
清晨-阳光的博客
08-14 3万+
在HTML中实现两个及以上div并排显示
html5+css3笔记资料
02-14
html5+css3笔记资料
html+css和html5+css3的学习笔记。
06-10
学习HTML+CSS和HTML5+CSS3时，你需要理解以下关键概念： 1. **语义化HTML**：使用恰当的标签来描述内容，提高可读性和可访问性。 2. **盒模型**：理解边距（margin）、填充（padding）和边框（border）如何影响元素...
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
最新发布
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
HTML5+CSS3 markdown笔记
11-17
HTML5和CSS3是现代网页开发的两大核心技术，它们共同为网页提供了丰富的表现力和结构化内容。Markdown则是一种轻量级的标记语言，常用于编写文档、笔记和个人日记，因其简洁易读的语法而备受青睐。以下是这些技术的...
HTML+CSS3+原生JS+JQuery学习笔记(详细)
11-19
自己学习时候做的笔记，非常详细超过2000行的文本内容，并且附带有部分代码案例，平时做开发的时候，基础语法用法等查询非常方便。
html5 css多列布局
weixin_33738982的博客
10-08 159
p{ text-indent: 2em; line-height: 2em;}h4{ -webkit-column-span:all; background: green; text-align: center;}section{ padding: 10px; background: rgba(180,60,30,0.6); /*column-wid...
【前端面试题】04—33道基础CSS3面试题(附答案)
web前端开发
03-04 924
伴随着大量让人欣喜的功能加入HTML5，CSS3也同样为我们带来了更加绚丽的样式效果。而CSS3面试题主要考察的仍然是那些已经应用在项目中的样式属性，以及应用过程中的一些常见问题，这些知识...
CSS自学笔记（15）:CSS3多列布局
weixin_30655569的博客
08-24 283
在CSS3中，也新增了一些关于文本布局的几个比较简单的属性。通过这些新增的属性，我们可以对文本进行简单的排版，就想报纸和杂志那样。 新增的部分属性，以及浏览器支持情况： 属性浏览器支持 column-count IE Firefox(-moz-) Chrome(-webkit-) Safari(-webkit-) Opera column-gap IE ...
网页中<li>分列显示
yaodaos的专栏
07-18 1576
.my ul { width: 410px; } .my li { width: 200px; /*如果显示三列 则width改为70px*/ float: left; display: block; } 金鳞岂是池中物 一遇风云便化龙 九霄龙吟惊天变 风云际会潜水游 那些花儿 那些花儿 如果显示的文字多而换行显示了，就调节宽度
在HTML5中，要把一篇文章分成多列显示，你可以使用CSS的column-count、column-width、column-gap和column-rule等属性
BLOG域名:programb.blog.csdn.net
07-03 892
如果容器宽度不足以按照指定的column-width显示所有列，则实际显示的列数可能会少于column-count设置的值。在HTML5中，要把一篇文章分成多列显示，你可以使用CSS的column-count、column-width、column-gap和column-rule等属性。column-gap设置了列与列之间的间距，而column-rule则添加了一个细微的分隔线来区分各列。column-gap属性用于设置列与列之间的间距，而column-rule属性则用于设置列之间的分隔线。
html表格自动分列,html页面中表单怎么用div分列布局
weixin_35944230的博客
05-31 1167
html页面中表单怎么用div分列布局主要分两个步骤操作：第一种情况，float浮动相同让两个div盒子的float值相同，比如都设置float:left或float:right，宽度设置合适即可。这里我们通过案例实现一行两列DIV布局。1、完整实例DIV+CSS代码：html>两个DIV并排.div-a{float:left;width:49%;border:1pxsolid#F00...
HTML5-转盘抽奖功能
xionghui2007的博客
01-13 7960
今天学习制作了转盘抽奖功能的页面 截图： 代码： 转盘抽奖功能 $(document).ready(function(e) { $("#content img").click(function(e) { var num = Math.floor(Math.random() * 3600); //求得随机的旋转度数 $("#zhuan
HTML5+CSS3网页设计-第七章 浮动.pptx
12-21
学习者将掌握如何利用`float`属性来创建网页元素的水平布局，实现横向多列布局，这是CSS3布局的重要组成部分。 浮动技术的关键在于理解`float:left`和`float:right`的区别，前者让元素向左浮动，后者向右浮动。同时...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值