css3多列布局

最新推荐文章于 2024-07-29 15:46:22 发布

Oʀɪɢɪɴᴀʟ .822

最新推荐文章于 2024-07-29 15:46:22 发布

阅读量41

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_70374250/article/details/134031740

版权

设置列宽

column-width： | auto 设置对象的宽度；使用像素表示。

auto：根据<'column-coount'>自定分配宽度

设置列数

column-count： | auto 用来定义对象中的列数，使用数字 1-10表示。

auto：根据<'column-width'> 自定分配宽度

同时设置列宽和列数

columns: <'column-width'> || <'column-count'>

设置对象的列数和每列的宽度。复合属性。

宽度和列数的合成；

.all{
  /* 设置列宽为100px,分3列，但是还是以列数为标准 */
  columns:100px 3;
}

列和列之间的间距

column-gap: normal || length， normal是默认值，为1em， length 是用来设置列与列之间的间距。

.all{
  column-count: 3;
  /* margin-left  + margin-right */
  column-gap: 40px;
}

列和列之间的边框

column-rule：<' column-rule-width '> ||<' column-rule-style '> ||<' column-rule-color '>

设置对象的列与列之间的边框。复合属性：包括边框的粗细，颜色，样式样式：

dotted 点状边框

dashed 虚线

double 双线

solid 实线

.all{
  column-count: 3;
  /* margin-left  + margin-right */
  column-gap: 40px;
  /* 3像素的间隔线 */
  column-rule: 3px dotted gray;
}

列高是否统一

column-fill：auto | balance 设置对象所有列的高度是否统一;

auto：列高度自适应内容;

balance：所有列的高度以其中最高的一列统一

两个效果基本上一样，没有太大变化

横跨多少列

column-span 属性规定元素应横跨多少列。

column-span: 1|all;

默认为1，一般情况下设置为all

使用多列布局实现瀑布流效果


<!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <title>标题</title>
        <link rel="shortcut icon" href="favicon.ico">
        <style>
          * {
            margin: 0;
            padding: 0;
          }
          .container {
            width: 96%;
            margin: 20px auto 20px;
          }
          .waterfall {
            /* 最多氛围多少列 */
            column-count: 3;
            -webkit-column-count: 3;
            -moz-column-count: 3;
            -ms-column-count: 3;
            -o-column-count: 3;
  
            /* 每列之间的间距是多少 */
            column-gap: 15px;
            -webkit-column-gap: 15px;
            -moz-column-gap: 15px;
            -ms-column-gap: 15px;
            -o-column-gap: 15px;
          }
          .item {
            display: inline-block;
            width: 100%;
            /* 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 */
            box-sizing: border-box;
            padding: 1em;
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-border-radius: 4px;
  
            /* 设置上下间距 */
            margin-bottom: 10px;
  
            /*  需要设置 height: 100%; overflow: auto */
            height: 100%;
            overflow: auto;
          }
          .item img {
            width: 100%;
            padding-bottom: 1em;
            margin-bottom: 0.5em;
            border-bottom: 1px solid #cccccc;
          }  
      </style>
    <body>
      <div class="container">
        <div class="waterfall">
          <div class="item">
            <img src="img/1.jpg" />
            <p>我来测试demo111111</p>
          </div>
          <div class="item">
            <img src="img/7.jpg" />
            我来测试demo2222</div>
          <div class="item">
            <img src="img/2.jpg" />
            <p>我来测试demo3333</p>
          </div>
          <div class="item">
            <img src="img/9.jpg" />
            <p>我来测试demo4444</p>
          </div>
          <div class="item">
            <img src="img/4.jpg" />
            <p>我来测试demo5555</p>
          </div>
          <div class="item">
            <img src="img/5.jpg" />
            <p>我来测试demo6666</p>
          </div>
          <div class="item">
            <img src="img/6.jpg" />
            <p>我来测试demo7777</p>
          </div>
          <div class="item">
            <img src="img/8.jpg" />
            <p>我来测试demo8888</p>
          </div>
          <div class="item">
            <img src="img/9.jpg" />
            <p>我来测试demo8888</p>
          </div>    
        </div>
      </div>
    </body>
</html>