CSS实现div竖向排版

1.最多显示四行，自动换列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {display: flex;flex-wrap: wrap;height: 84px;flex-direction: column;}</style>
</head>
<body><div class="container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div></div>
</body></html>

2.均分成3列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {column-count: 3;}</style>
</head>
<body><div class="container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div></div>
</body></html>

CSS实现div竖向排版相关推荐

网页css实现文字竖向排版的几种方法
下面介绍几种使用Css实现文字竖向排版的方法: 1.一个句子的竖向排列如图: <!DOCTYPE html> <html> <head> <title> ...
css实现文字竖向排版
1.一个句子的竖向排列 <!DOCTYPE html> <html> <head> <title>test</title> <meta ...
[css] 实现文本的竖向排版
[css] 实现文本的竖向排版 writing-mode: vertical-lr;/从左向右从右向左是 writing-mode: vertical-rl;/ writing-mode: tb-l ...
html 英文文字纵向排列,CSS几种简单方法实现文字竖向排版
1.一个句子的竖向排列如图: 1. 2. test .one { width: 20px; margin: 0 auto; line-height: 24 ...
div+css让div内部元素均匀分布
享受优美排版,请到博客原地址div+css让div内部元素均匀分布 RT,做网站中有多个单选按钮,想让其均匀分布,网上找了好多,终于找到了解决方案. <div style="width ...
php div 居中代码,用CSS实现DIV水平居中显示
div用css设置居中的方法:首先对body设置"text-align:center":然后对需要居中的div盒子设置css样式为"margin:0 auto" ...
CSS与DIV的结合使用
目录 CSS与DIV进行的页面布局 1.页面布局 2.CSS的定位机制 3.浮动属性 4.常见的浮动布局 5.清除浮动 6.定位属性 7.在页面布局中常用的CSS属性 8.CSS中的块元素和行内元素 ...
CSS和div布局页面
CSS和div布局页面 CSS和div布局页面一.什么是布局网页布局页面元素定位机制二.布局属性浮动清除浮动定位绝对定位相对定位固定定位一.什么是布局网页实质是块与块之间的位置 ...
css实现div水平垂直居中：竖排居中，横排居中
write-mode实现文字竖排并居中参考:css实现文字纵向排版并且水平垂直居中 <div class="title-div">实时故障信息</div> ...

CSS实现div竖向排版

CSS实现div竖向排版相关推荐

最新文章

热门文章