如何使用CSS将内容分成几列显示？

html-css019

如何使用CSS将内容分成几列显示？,第1张

想要使用CSS将div元素的内容分成多列来显示，可以使用columns属性。columns属性一个简写属性，可以设置列数和列宽，用于设置分栏模块。下面本篇文章就来给大家介绍一下columns属性，希望对大家有所帮助。

columns 属性是一个简写属性，一次可以采用多个值；用于设置列宽和列数。

语法：

属性值：

●　auto： 这会将列宽和列计数值设置为其浏览器默认值。

示例：

效果图：

注意：如果未指定column-width和column-count中的任何值，则浏览器默认将其值设置为auto。

●　column-width和columns-count ：用于使用整数值指定列宽和列数。

效果图：

浏览器支持：

●　Chrome 50.0, 4.0 -webkit-

●　Edge 10.0

●　Firefox 52.0, 9.0 -moz-

●　Safari 9.0, 3.1 -webkit-

●　Opera 37.0, 15.0 -webkit- 11.1

可以通过竖向排列的方式，将子div设置为行内块即可。话不多说了，直接上代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

div {border: solid 1px #000}

#main-div {

width: 200px

height: 300px

writing-mode: vertical-lr}

.item {

width: 100px

height: 50px

display: inline-block

background-color: antiquewhite

writing-mode: horizontal-tb}

</style>

</head>

<body>

<div id="main-div">

<div class="item">一条内容</div>

<div class="item">一条内容</div>

<div class="item">一条内容</div>

<div class="item">一条内容</div>

<div class="item">一条内容</div>

<div class="item">一条内容</div>

<div class="item">一条内容</div>

</div>

</body>

</html>

效果如下：

这都已经9年了，也就我想到了这个问题的答案，我简直就是个天才，哈哈哈