Material Design Lite学习（四）网格（续）

最新推荐文章于 2024-09-24 10:17:01 发布

汪星人来地球

最新推荐文章于 2024-09-24 10:17:01 发布

阅读量736

点赞数

分类专栏： HTML 文章标签： material design lite web html css

本文链接：https://blog.csdn.net/hedan2013/article/details/52955916

版权

本文是Material Design Lite网格布局系列的第四部分，讲解如何消除单元格之间的间隙以及实现单元格的居中、右对齐和两端对齐布局。通过特定的CSS设置，可以调整mdl-grid的显示效果，例如使用mdl-layout-spacer实现对齐。

摘要由CSDN通过智能技术生成

本文接上一篇博客，继续介绍一些MDL网格（Grid）布局的手段。

1. 消除单元格间隙

在默认的mdl-grid类中，它内部的单元格之间会有一定的间隙（margin）。有时候，我们在布局时，可能不希望出现这样的间隙。此时可以做如下设置。

            <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-cell mdl-cell--5-col gray-box">单元格1</div>
                <div class="mdl-cell mdl-cell--2-col gray-box">单元格2</div>
                <div class="mdl-cell mdl-cell--2-col gray-box">单元格3</div>
                <div class="mdl-cell mdl-cell--3-col gray-box">单元格4</div>
                <div class="mdl-cell mdl-cell--3-col gray-box">单元格5</div>
            </div>

代码第01行，为div容器设置了mdl-grid--no-spacing类，表示容器内部的单元格不留间隙。代码的执行效果如下。

2. 单元格的对齐方式

a. 居中对齐

在mdl-grid下的容器，默认是从左向右排列。如果要单元格居中排列，可以做如下设置。

            <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-layout-spacer"></div>
                <div class="mdl-cell mdl-cell--3-col gray-box">单元格6</div>
                <div class="mdl-layout-spacer"></div>
            </div>

代码的第2和第4行分别在单元格6的左右两边添加了一个class为mdl-layout-spacer的div元素。这两个元素会把一行的剩余空间平分成两份，各自占据一份。这样，就形成了单元格6居中对齐的效果。见下图。