多列

定义多列文本就像报纸页面那样看起来舒服有规律。
多列有的属性：

column-count   属性规定元素应被划分的列数。
column-gap     属性规定列之间的间隔。
column-rule-style    属性规定列之间的规则样式：
column-rule-width    属性规定列之间的规则宽度：
column-rule-color    属性规定列之间的规则的颜色：
column-rule          属性是用于设置上面所有 column-rule-* 属性的简写属性。
column-span          属性规定元素应跨越多少列。
column-width         属性是用于设置上面所有 column-rule-* 属性的简写属性。

属性举例介绍

一：column-count

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {column-count: 3;
}
</style>
</head>
<body><div class="newspaper">
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
</div></body>
</html>

运行结果：

二：column-gap

例：

column-gap: 40px;

属性列之间相隔40px

三：column-rule-style

例：

column-rule-style: solid;

属性列之间的规则样式为实线。

四：column-rule-width

例：

div {column-rule-width: 1px;
}

五：column-rule-color

例

div {column-rule-color: lightblue;
}

前端：css中的多列的实现与介绍相关推荐

前端---css中的overflow属性如何使用
CSS overflow 属性属性定义及使用说明 overflow属性指定如果内容溢出一个元素的框,会发生什么. 默认值: visible 继承: no 版本: CSS2 JavaScript 语法 ...
前端——CSS中常用的定位方式
#博学谷IT学习技术支持# 目录 1.静态定位 2.相对定位 3.绝对定位 4.固定定位 5.定位偏移值 6.元素层级关系 1.静态定位静态定位,position: static;静态定位就是标准流 ...
前端css中常见的-moz-,-webkit-,-o-分别是什么？
-moz-,-webkit-,-o-这三个是厂商前缀不同浏览的厂商,因为不同浏览器有不同的标准, 所以为了兼容性,需要把常用的浏览器对应的厂商前缀加上. 所以四个属性代表的是一个意思. -moz- ...
web前端-css中最直观的反馈-伪类及伪元素选择器的使用
前端CSS实现八卦图，三角形
浅谈前端CSS中的一个硬核属性-border 前言了解过前端的都知道,html 所有的标签都离不开border属性,Border,顾名思义,边框,给标签加个边框,就像我们生活中的窗户框子,Borde ...
css匹配title,解决css中的匹配问题
问题描述众所周知在写 css的时候,会根据html 中类的定义或者 id 的定义来写相应的 css代码.给不同的类定义不同的样式,当然为了能够少写一些代码,大家就会在css 中引用匹配.匹配有模糊匹 ...
在html中如何使用span,如何在HTML和CSS中使用DIV和span？
本文将帮助您理解和使用在css和HTML中如何使用"div"和"span",并用CSS对它们进行样式化.使用"div"的主要目的是将主体分成 ...
SQL Server中的计算列概述
In this article, we will explore computed columns in SQL Server and their configurations. 在本文中,我们将探讨 ...
css中reset属性详解,css中如何使用counter-reset属性
css中如何使用counter-reset属性发布时间:2020-09-23 14:26:58 来源:亿速云阅读:83 作者:小新这篇文章主要介绍css中如何使用counter-reset属性, ...

前端：css中的多列的实现与介绍

目录

多列

属性举例介绍

一：column-count

二：column-gap

三：column-rule-style

四：column-rule-width

前端：css中的多列的实现与介绍相关推荐

最新文章

热门文章