<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .wrapper{

             width: 100%;

             padding: 20px;

             box-sizing: border-box;

             /*设置多列布局*/

             /*1.设置列数*/

             column-count: 3;

             /*添加列之间的间隙样式，与边框样式的添加一样*/

             column-rule: dashed 3px red;

             /*设置列间隙大小*/

             column-gap: 50px;

             /*设置宽列

             原则：取大优先

             1.如果认为设置宽度更大，则取更大的值，但会填满整个屏幕，意味着最终的宽度可能也会大于设置的宽度---填充满整个屏幕

             2.如果认为设置宽度更小，使用默认计算的宽度*/

             column-width: 300px;

         }

         h4{

             /*设置跨列显示*/

             column-span: all;

         }

     </style>

 </head>

 <body>

 <div class="wrapper">

     <h4>

         爱的目送

     </h4>

       毕业前最后一节课，老师对学生说：“我再看看你们。”

       即将说再见，老师不舍，要“再看看”。是啊，人生路那么漫长，可老师能陪伴学生走过的，终究只有一段路。这段路是艰辛的，传道、授业、解惑，都是这条路上必经。老师要对学生们倾囊相授，让学生从不知到知之；要对学生正确引导，让学生不仅学会知识，还要树立正确的人生观、价值观；要对学生倍加关怀，让学生感觉到他们不仅在获得知识，寻求真理，更在得到老师的爱。

       “捧着一颗心来，不带半根草去”，这是著名人民教育家陶行知先生的名言，陶行知先生如此，图中的老师如此，普天之下的老师也莫不如此。也因着这一颗心，才有了“我再看看你们”的那份不舍。

       当然，除了不舍，还有希冀。

       正如图中老师对学生说的那句：“你们再看看书。”

       对于老师而言，即将挥手作别的是学生。老师希望学生再看看书，字短情长：再看看书，学生们才能更熟练地掌握所学知识，更好地应对考试，更稳健地走好未来的路。

       师生一回，学生们终究要远行，老师能给他们的，是不舍，是希冀，是一场充满爱的目送。

       这样充满爱的目送，我一定是拥有过的，可惜的是，在我拥有的时候不曾有太强烈的感受，直到毕业多年，才在回忆中享用。譬如我在大学毕业后回东北故乡探亲的时候，小学班主任远远看见我并喊我名字，说看背影也看得出是自己曾经教过的学生，说这些话的时候，班主任老师眼里满是真挚。

       那之后我在反问自己，如果是我远远看到老师的背影，我认得出么？恐怕不能。譬如我的初中语文老师在多年之后托人打听我的手机号码，同我联系，只是想知道我过得怎么样，她说她会为我骄傲，而我呢？接到语文老师电话那一刻，我除了感动，更多的是羞愧，我可能对老师也有一样的牵挂？上述种种，应了一句“当时只道是寻常”，老师对我们那份爱，那份不舍与希冀，总是在分别之后，才被感知。

       老师们知道的，是分别时，他们对学生们那一场爱的目送。

       老师们不知道的，是分别后，他们也正在或终将成为学生们心中一道爱的风景，随着时光永恒。

       今天，因着图中这一场爱的目送，也让我想对曾经教过我的老师说一句：“请让我再看看书，也请让我再看看您！”

 </div>

 </body>

 </html>

效果图：

h5-多列布局的更多相关文章

  1. H5多列布局

    多列布局 基本概念 1.多列布局类似报纸或杂志中的排版方式,上要用以控制大篇幅文本. 2.跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ ...

  2. css两列布局，一边固定宽度，另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

  3. bootstrap的栅格布局与两列布局结合使用

    在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...

  4. css3-columns多列布局

    /*css3中的布局*/ .wrapper{ margin:auto; width:300px; height:200px; border:2px dotted blue; -webkit-colum ...

  5. 多栏多列布局（display:flex）

    display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...

  6. css之页面两列布局

    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...

  7. CSS三列布局

    × 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...

  8. CSS多列布局

    × 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...

  9. 第 28 章 CSS3 多列布局

    学习要点: 1.早期多列问题 2.属性及版本 3.属性解释 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局. 一．早期多列问题 我们 ...

  10. FineUI第十三天---`列布局

    这是经典的列布局:                  <x:Panel runat=                     <Items>                      ...

随机推荐

  1. 牛客周赛11TG B-弹钢琴

    链接:https://ac.nowcoder.com/acm/contest/941/B来源:牛客网 题目描述 春希想听和纱弹钢琴! 为了阻止异变的发生,Pi将钢琴魔改了 钢琴上有 N 个键,每个键有 ...

  2. 013.CI4框架CodeIgniter数据库操作之：查询数据库，并让数据以数组的方式返回查询结果

    01. 我们在CI4框架中的Model文件夹新建一个User_model.php的文件,使用的是getResultArray,表示并让数据以数组的方式返回查询结果,代码如下: <?php nam ...

  3. qq群的表设计探究

    2018年3月21日  课题组管理就如qq的群是一样的,课题组有课题组组长:qq群有群主:课题组有组员:qq群有群人员 对于一个课题组来说,组长可以对课题组进行修改,组员只能看得见,但是不能修改.所以 ...

  4. HDU - 6195 cable cable cable

    题意:如下图,有K个光源,一个光源可同时照射一个显示屏,问从M个显示屏中任选K个,可以使每个显示屏都被不同光源照亮最少需要多少连接电缆. 分析:画图分析可知 1.选1~K个显示屏和选M-K+1~M个显 ...

  5. 指令——cd

    一个完整的指令的标准格式: Linux通用的格式——#指令主体(空格) [选项](空格) [操作对象] 一个指令可以包含多个选项,操作对象也可以是多个. 命令:#cd (change director ...

  6. oracle 开发注意事项

    新建表或字段时,不能使用char,统一使用varcha,防止判断null时有遗漏 新建表,索引,序列,新增删除或修改字段的时候,要先判断操作的对象是否存在,否则SLQ会报错 插入或者修改特殊字符,解决 ...

  7. 微信小程序调用用百度地图天气功能

    #小程序之调用百度地图天气功能 本篇博客主要介绍小程序在百度地图中获取天气信息,如有不全请指出.下面先上效果图 主要内容 百度地图API的个人密钥,也就是AK 请求百度地图API接口数据 获取到的信息 ...

  8. 第九届蓝桥杯省赛c/c++真题明码题解答案，另类excel解法思路

    直到快比赛才重视起之前学校给报了蓝桥杯,且这段时间一直在做Python,所以没做什么准备. 赛场上做这道题时连反码补码的知识点都记混,所以直接用了excel做这道题目,分享下做题思路.及题解. 标题: ...

  9. 09.swoole学习笔记--进程事件

    <?php //进程数组 $workers=[]; //创建进程的数据量 $worker_num=; //创建启动进程 ;$i<$worker_num;$i++){ //创建单独新进程 $ ...

  10. 154-PHP strpos函数

    <?php $str='passwords'; //定义一个字符串 $position=strpos($str,'s'); //查找字母s第一次出现的位置 echo '字母s的位置是'.$pos ...