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

html-css079

如何使用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年了，也就我想到了这个问题的答案，我简直就是个天才，哈哈哈

兄弟,div实现不了100%高度,最多只能自适应高度.你还是在iframe上定高度吧

=============================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>左右分栏</title>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<meta content="MSHTML 6.00.2900.2180" name="GENERATOR">

<script language="JavaScript">

//左右

function switchSysBarl(){

var imgsrc

imgsrc=document.all("makeleft").src

document.all("makeleft").src="img/menu_open.gif"

document.all("makeleft").title="显示左边的菜单"

parent.document.all("bbs_left").style.display="none"

}

else{

document.all("makeleft").src="img/menu_close.gif"

document.all("makeleft").title="隐藏左边的菜单"

parent.document.all("bbs_left").style.display=""

}

}

</script>

<link rel="shortcut icon" href="favicon.ico">

</head>

<body bottommargin="0" leftmargin="0" topmargin="0" scroll="no" rightmargin="0">

<div style="z-index: 2visibility: inheritwidth: autoheight: autofloat: left"

frameborder="0" scrolling="no" target="main">

<iframe name="bbs_left" style="z-index: 2visibility: inheritwidth: 180pxheight: 100%"

src="left.htm" frameborder="0" scrolling="no" target="main"></iframe>

</div>

<div style="background-color: #005fbdwidth: 10pxfloat: leftheight: 800pxcursor: hand

padding: 300px 0px 0px 0px" id="menuSwitch" onclick="switchSysBarl()">

<img src="img/menu_close.gif" name="makeleft" width="10" height="10" border="0" id="makeleft" /></div>

<div style="float: leftwidth: auto">

<iframe name="bbs_main" style="z-index: 1visibility: inheritwidth: 100%height: 100%" src="right.htm"

frameborder="0" scrolling="yes"></iframe>

</div>

</body>

</html>