css如何将一行平均分成几列?

css如何将一行平均分成几列?

column-count 属性规定元素应该被划分的列数。它的取值可以是number|auto

number:元素内容将被划分的最佳列数。

auto:由其他属性决定列数,比如 "column-width"。

(相关课程推荐:css视频教程

<!DOCTYPE html>
<html>
<head>
<style>
body{
  background: #e4e4e4;
}
.newspaper
{
  -moz-column-count:3; /* Firefox */
  -webkit-column-count:3; /* Safari and Chrome */
  /* 平均分为3列 */
  column-count: 3;
  background: #eee;
}
.item{
  font-size: 16px;
  background: #fff;
}
</style>
</head>
<body>

<p><b>注释:</b>Internet Explorer 不支持 column-count 属性。</p>

<div class="newspaper">
  <div class="item">这是第1列</div>
  <div class="item">这是第2列</div>
  <div class="item">这是第3列</div>
</div>

</body>
</html>

效果:

Snipaste_2019-12-28_13-16-21.jpg

此外,我们还可以设置column-gap,来规定每一列之间的间距。使用Column-rule规定列之间的宽度、样式和颜色。

column-gap:80px;
column-rule:1px outset #ff0000;

Snipaste_2019-12-28_13-22-19.jpg

Image placeholder
前端答疑
未设置
  68人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何在css中让图片横向展开排列?

如何在css中让图片横向展开排列?1、首先添加一个div来存放所有的图片。2、然后隐藏div在纵向的滚动条,横向的滚动条设置为自动。3、最后设置divwhite-space:nowrap不换行即可。这

js如何修改css属性?

js如何修改css属性?1、修改style样式:通过document.styleSheets[n]//n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssRules[0]获取到

css如何清除a标签的block属性

css如何清除a标签的block属性a标签默认是inline行内元素,不支持设置宽高等属性。为了让a标签支持宽高属性,我们可以设置a{display:block}将它变成块级元素同样的,清除a标签的b

css如何设置字体位置

css如何设置字体位置1、text-align设置字体的位置text-align语法:text-align:left|right|center|justifytext-align参数值与说明:left

css如何让元素不随滚动条滚动?

在CSS中,可以使用固定定位(position:fixed;)来固定元素的位置,让元素不随滚动条滚动。fixed生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对

css如何让字体不加粗?

在CSS中可以使用font-weight:normal样式来让字体不加粗。font-weight属性设置文本的粗细,设置值为normal来定义标准的字符。font-weight属性用于设置显示元素的文

css如何设置图片不变形

css如何设置图片不变形解决方法有两种:一、让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形。//原尺寸300*200 //等比缩放2:1 img{ wid

css如何去掉html元素

css如何去掉html元素css无法将html元素完全的从页面中去除,但是可以通过一些方法让它们在视觉上隐藏掉。具体的做法是设置元素css属性display:none和visibility:hidde

css如何设置表格边框不重叠?

css如何设置表格边框不重叠?一、设置css属性border-collapse:collapse。table{ border-collapse:collapse; } tabletr{ border:

js如何引入css文件?

js如何引入css文件?1、使用document.write方式输出引入css的link标签在调用文件的顶部加入下例代码 document.write(''); (注:有时你引用的文件还可能需要引用其

css如何设置元素不显示仅占位置?

css如何设置元素不显示仅占位置?隐藏页面元素可以使用visibility:hidden属性,它将元素设置为不可见,并且占据原来的位置,不能响应点击事件。不可见 .hide{ visibility:

css如何实现文字颜色渐变?3种实现方法

基础样式:.gradient-text{ text-align:left; text-indent:30px; line-height:50px; font-size:40px; font-

css如何设置文字描边效果?

想要使用CSS给文字添加描边效果,主要有两种方法:使用text-stroke属性或text-shadow属性。方法1:使用text-shadow属性text-shadow属性用于向文本添加字体边框或阴

css如何把div修饰成圆?

css如何把div修饰成圆?1、打开代码编辑器,新建一个html文件,写上基本的结构 Document 2、在body标签内输入:,这里的div就是用于画圆形的标签。(推荐学习:CSS视

CSS如何让背景图片不重复?

CSS如何让背景图片不重复?css中设置完背景图后,不指定平铺属性,默认是横向纵向重复的,导致图片出现重复。让图片不重复可以设置background-repeat属性。css中background-r

css怎么解决h1不独占一行?

css怎么解决h1不独占一行?H标签默认都是独占一行的。当它们不独占一行时,可能有以下原因:设置了display为inline或inline-block设置了父级元素display为flex,并且fl

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

中国SaaS如何出海掘金?

随着国内人口红利逐渐消失殆尽,出海掘金成为国内软件厂商的一个新选择。尤其移动互联网时代国内的互联网公司走在了世界的前面,除了阿里、腾讯、京东等巨头外,很多SaaS公司也选择出海寻求新的机会。比如做劳动

一行代码解决求重问题

对需求的深刻认知,决定了解决问题的技巧高度 问题例如:vara=[[1,2,3,5],[2,3,4],[2,3],[2,3,6,7]]; 输出:[2,3] 例如:vara=[[0,1,2,3,5],

我如何将博客迁移到 Kubernetes(上)

最近Kubernetes的发展,以及在我司的大量应用,自己也迫不及待想要尝尝鲜,虽然我的博客是基于Hexo的纯静态站点,但这并不能阻挡我把它迁移上Kubernetes!毕竟...相比于GitHubPa

我如何将博客迁移到 Kubernetes(下)

前面的部分介绍了如何为我的博客打包Docker镜像,接下来就是重头戏——部署到Kubernetes。 GoogleKubernetesEngine 没错,我现在自用的Kubernetes集群就是

如何将样式加入到react组件上

如何将样式加入到react组件上一、使用行内样式想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现://注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 H

如何将echarts集成到react中

如何将echarts集成到react中在使用echarts之前需要先安装echarts,可以直接使用node命令来安装npminstallecharts--save包依赖安装完毕后,这个时候我们的EC

如何将react项目部署到服务器

如何将react项目部署到服务器前提要求:●nodejs环境●一个react项目●一个服务器(本地也行)1、首先打开项目目录,按下shift+右键,打开命令提示符,输入打包命令npmrunbuild2

如何将网站的php版本信息隐藏起来

当我们把网站上线之后,我们可以通过curl的如下命令显示指定网站的头信息,curl的安装方法参考:https://www.wj0511.com/site/d...curl-Ihttps://www.w