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

最新推荐文章于 2025-09-10 10:12:04 发布

原创最新推荐文章于 2025-09-10 10:12:04 发布 · 784 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#material design lite #web #html #css

HTML 专栏收录该内容

8 篇文章

订阅专栏

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

本文接上一篇博客，继续介绍一些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居中对齐的效果。见下图。

b. 右对齐

右对齐的原理与居中对齐类似。在单元格的左方添加了一个class为mdl-layout-spacer的div元素。

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

c. 两端对齐

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

d. 两个单元格中心轴对称

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

注意：使用mdl-layout-spacer时，只能布局一行。否则，可能导致布局混乱。

本文涉及的完整代码。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Material Design Lite">
    <title>MDL 示例</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="static/css/material.min.css">
    <script src="static/js/material.min.js"></script>
    <style>
        .gray-box{
            background-color: #dfdfdf;
        }
    </style>
</head>
<body>
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
        <header class="mdl-layout__header">
            <div class="mdl-layout__header-row">
                <span class="mdl-layout-title">MDL 样例</span>
            </div>
        </header>
        <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">MDL 教程</span>
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link">概述</a>
                <a class="mdl-navigation__link">布局</a>
            </nav>
        </div>
        <main class="mdl-layout__content">
            <!-- 消除单元格间隙-->
            <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>
            <!-- 居中对齐-->
            <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>
            <!-- 右对齐-->
            <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-layout-spacer"></div>
                <div class="mdl-cell mdl-cell--3-col gray-box">单元格7</div>
            </div>
            <!-- 两端对齐-->
            <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-cell mdl-cell--3-col gray-box">单元格8</div>
                <div class="mdl-layout-spacer"></div>
                <div class="mdl-cell mdl-cell--3-col gray-box">单元格9</div>
            </div>
            <!-- 两个单元格中心轴对称-->
            <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-layout-spacer"></div>
                <div class="mdl-cell mdl-cell--3-col gray-box">单元格10</div>
                <div class="mdl-layout-spacer"></div>
                <div class="mdl-layout-spacer"></div>
                <div class="mdl-cell mdl-cell--3-col gray-box">单元格11</div>
                <div class="mdl-layout-spacer"></div>
            </div>
        </main>
    </div>
</body>
</html>