h5-多列布局
2024-09-02 08:32:49
<!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>
效果图:
最新文章
- 云与备份之(1):VMware虚机备份和恢复
- aop
- css3的transition过渡
- helper实现隐藏前台特效
- Bitmap四种属性
- 深入Spring IOC源码之ResourceLoader
- 第七篇 Integration Services:中级工作流管理
- spring security之httpSecurity使用示例
- iOS开发之 Xcode 6 创建一个Empty Application
- AngularJS理论基础
- 国产ProcessOn和国外gliffy的对比区别【原创】
- 线上问题 - MySQL SQL state [HY000]; error code [1366]
- MongoDB使用记录
- Cassandra的登录认证授权
- 移动web性能优化笔记
- openstack-kilo--issue(十二)openstack-keystone和httpd服务同时占用35357和5000
- java代码中 路径符号的写法
- Android Studio常用快捷键使用
- js变量类型和计算
- JavaScript基础笔记(一)基本概念
热门文章
- ROS常用库(二) Serial库(单片机和上位机串口通讯)
- 题解:luogu P1247
- pandas包 —— drop()、sort_values()、drop_duplicates()
- eclipse环境变量设置
- Arrays类常用方法
- 开发者说 | 云+AI赋能心电医疗领域的应用
- WMware workstation 镜像文件
- HDU - 6205 card card card (尺取法)
- UVALive - 7752 Free Figurines
- UVA - 122 Trees on the level (二叉树的层次遍历)