div+css实现内容两列、三列或多列分栏

当前位置： 首页 » 记录 » css » div+css实现内容两列、三列或多列分栏

分类： css 51阅读阅读模式

技巧源于对 writing-mode 的把控，全程不需要JS，先通过 vertical-lr 改成竖列的从左到右排序，再通过子项的 horizontal-tb 把数列内容纠正成横排的从上到下叠放（这是HTML的div叠放规则） ，代码如下

 

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Title</title>
  6.     <style>
  7.       * {
  8.         margin: 0;
  9.         padding: 0;
  10.         box-sizing: border-box;
  11.       }
  12.       div {
  13.         border: 1px solid #000;
  14.       }
  15.       .main {
  16.         width: 200px;
  17.         height: 300px;
  18.         /* 主要代码，控制列排放 */
  19.         writing-mode: vertical-lr;
  20.         border: solid 1px #000;
  21.         display: flex;
  22.         flex-wrap: wrap;
  23.       }
  24.       .item {
  25.         /* 主要代码，控制多少列，比如50%是2列，25%就是4列  */
  26.         width: 50%;
  27.         height: 50px;
  28.         background-color: #aaa;
  29.         /* 主要代码，控制项方向 */
  30.         writing-mode: horizontal-tb;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div class="main">
  36.       <div class="item">内容1</div>
  37.       <div class="item">内容2</div>
  38.       <div class="item">内容3</div>
  39.       <div class="item">内容4</div>
  40.       <div class="item">内容5</div>
  41.       <div class="item">内容6</div>
  42.       <div class="item">内容7</div>
  43.       <div class="item">内容8</div>
  44.       <div class="item">内容9</div>
  45.     </div>
  46.   </body>
  47. </html>

 

提示：回复可见的文章，回复评论成功后，需要刷新页面才能看到被隐藏的内容！
永久固定短链接地址：
本文转载于网络，如对文章有疑问，请点击原文地址，咨询原作者。

相关文章

评论一下

暂无评论