h5-多列布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .wrapper{ 8 width: 100%; 9 padding: 20px; 10 box-sizing: border-box; 11 /*设置多列布局*/ 12 /*1.设置列数*/ 13 column-count: 3; 14 /*添加列之间的间隙样式，与边框样式的添加一样*/ 15 column-rule: dashed 3px red; 16 /*设置列间隙大小*/ 17 column-gap: 50px; 18 /*设置宽列 19 原则：取大优先 20 1.如果认为设置宽度更大，则取更大的值，但会填满整个屏幕，意味着最终的宽度可能也会大于设置的宽度---填充满整个屏幕 21 2.如果认为设置宽度更小，使用默认计算的宽度*/ 22 column-width: 300px; 23 24 } 25 h4{ 26 /*设置跨列显示*/ 27 column-span: all; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="wrapper"> 33 <h4> 34 爱的目送 35 </h4> 36 毕业前最后一节课，老师对学生说：“我再看看你们。” 37 38 即将说再见，老师不舍，要“再看看”。是啊，人生路那么漫长，可老师能陪伴学生走过的，终究只有一段路。这段路是艰辛的，传道、授业、解惑，都是这条路上必经。老师要对学生们倾囊相授，让学生从不知到知之；要对学生正确引导，让学生不仅学会知识，还要树立正确的人生观、价值观；要对学生倍加关怀，让学生感觉到他们不仅在获得知识，寻求真理，更在得到老师的爱。 39 40 “捧着一颗心来，不带半根草去”，这是著名人民教育家陶行知先生的名言，陶行知先生如此，图中的老师如此，普天之下的老师也莫不如此。也因着这一颗心，才有了“我再看看你们”的那份不舍。 41 42 当然，除了不舍，还有希冀。 43 44 正如图中老师对学生说的那句：“你们再看看书。” 45 46 对于老师而言，即将挥手作别的是学生。老师希望学生再看看书，字短情长：再看看书，学生们才能更熟练地掌握所学知识，更好地应对考试，更稳健地走好未来的路。 47 48 师生一回，学生们终究要远行，老师能给他们的，是不舍，是希冀，是一场充满爱的目送。 49 50 这样充满爱的目送，我一定是拥有过的，可惜的是，在我拥有的时候不曾有太强烈的感受，直到毕业多年，才在回忆中享用。譬如我在大学毕业后回东北故乡探亲的时候，小学班主任远远看见我并喊我名字，说看背影也看得出是自己曾经教过的学生，说这些话的时候，班主任老师眼里满是真挚。 51 52 那之后我在反问自己，如果是我远远看到老师的背影，我认得出么？恐怕不能。譬如我的初中语文老师在多年之后托人打听我的手机号码，同我联系，只是想知道我过得怎么样，她说她会为我骄傲，而我呢？接到语文老师电话那一刻，我除了感动，更多的是羞愧，我可能对老师也有一样的牵挂？上述种种，应了一句“当时只道是寻常”，老师对我们那份爱，那份不舍与希冀，总是在分别之后，才被感知。 53 54 老师们知道的，是分别时，他们对学生们那一场爱的目送。 55 56 老师们不知道的，是分别后，他们也正在或终将成为学生们心中一道爱的风景，随着时光永恒。 57 58 今天，因着图中这一场爱的目送，也让我想对曾经教过我的老师说一句：“请让我再看看书，也请让我再看看您！” 59 </div> 60 </body> 61 </html>
效果图：
