css3——多列布局、瀑布流

多列布局

  • colum-count:属性设置列的具体个数
  • colum-width:属性控制列的宽度
  • column-gap:两列之间的列间距
  • column-rule:规定列之间的分割线的宽度、样式和颜色
  • column-span:规定元素应横跨多少列(1:不跨列(默认);all:跨所有列)

实例:

<style>
        div {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            /*设置列数*/
            column-count: 3;
            /*添加列间隙样式,与 border 类似*/
            column-rule: 2px dotted #f98769;
            /*设置列间隙*/
            column-gap: 50px;
            /*设置列宽
            原则:取大优先
            1.如果人为设置宽度大,则取更大的值,但是会填充整个屏幕,意味最终的宽度可能大于设置的宽度
            2.如果人为设置的宽度更小,则使用默认计算的宽度*/
            column-width: 100px;
        }

        div > h3 {
            text-align: center;
            /*设置跨列显示*/
            column-span: all;
        }
style>

<div>
    <h3>文章h3>
    <p>
        地坛离我家很近。或者说我家离地坛很近。总之,只好认为这是缘分。地坛在我出生前四百多年就座落在那儿了,而自从我的祖母年轻时带着我父亲来到北京,就一直住在离它不远的地方——五十多年间搬过几次家,可搬来搬去总是在它周围,而且是越搬离它越近了。我常觉得这中间有着宿命的味道:仿佛这古园就是为了等我,而历尽沧桑在那儿等待了四百多年。p>
    <p>
        它等待我出生,然后又等待我活到最狂妄的年龄上忽地残废了双腿。四百多年里,它一面剥蚀了古殿檐头浮夸的琉璃,淡褪了门壁上炫耀的朱红,坍圮了一段段高墙又散落了玉砌雕栏,祭坛四周的老柏树愈见苍幽,到处的野草荒藤也都茂盛得自在坦荡。p>
    <p>
        这时候想必我是该来了。十五年前的一个下午,我摇着轮椅进入园中,它为一个失魂落魄的人把一切都准备好了。那时,太阳循着亘古不变的路途正越来越大,也越红。在满园弥漫的沉静光芒中,一个人更容易看到时间,并看见自己的身影。p>
    <p>
        “园墙在金晃晃的空气中斜切下—溜荫凉,我把轮椅开进去,把椅背放倒,坐着或是躺着,看书或者想事,撅一杈树枝左右拍打,驱赶那些和我一样不明白为什么要来这世上的小昆虫。”“蜂儿如一朵小雾稳稳地停在半空;蚂蚁摇头晃脑捋着触须,猛然间想透了什么,转身疾行而去;瓢虫爬得不耐烦了,累了祈祷一回便支开翅膀,忽悠一下升空了;树干上留着一只蝉蜕,寂寞如一间空屋;露水在草叶上滚动,聚集,压弯了草叶轰然坠地摔开万道金光。”p>
div>

在这里插入图片描述

瀑布流

/* 父元素 */
column-count: 2;
column-gap: 10px;
/* 子元素 */
break-inside: avoid;

实例:


<html>
<head>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0;
        }
        .waterfall-container {
            /*分几列*/
            column-count: 2;
            width: 100%;
            /* 列间距 */
            column-gap: 10px;
        }
        .waterfall-item {
            break-inside: avoid;
            width: 100%;
            height: 100px;
            margin-bottom: 10px;
            background: #ddd;
            column-gap: 0;
            text-align: center;
            color: #fff;
            font-size: 40px;
        }
    style>
head>
<body>
    <div class="waterfall-container">
        <div class="waterfall-item" style="height: 100px">1div>
        <div class="waterfall-item" style="height: 300px">2div>
        <div class="waterfall-item" style="height: 400px">3div>
        <div class="waterfall-item" style="height: 100px">4div>
        <div class="waterfall-item" style="height: 300px">5div>
        <div class="waterfall-item" style="height: 600px">6div>
        <div class="waterfall-item" style="height: 400px">7div>
        <div class="waterfall-item" style="height: 300px">8div>
        <div class="waterfall-item" style="height: 700px">9div>
        <div class="waterfall-item" style="height: 100px">10div>
    div>
body>
html>

你可能感兴趣的:(html,和,css)