对齐网格中的组件：MDL

时间：2017-02-28 07:10:20

标签： html css material-design

我需要帮助在网格中安排mdl卡内的组件。我是网页设计新手可以帮助解释一下如何安排。在这里，我创建了三张卡，需要在三张卡内放置切换开关。

<!doctype html>
<html class=" ui-layout-condensed ui-capitalize-values ui-icons-enabled ">

<head>
  <title>thome | DashBoard</title>
  <!-- Material Design icon font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <!-- Material Design Lite -->
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <link rel="stylesheet" href="/css/card.css">
  <link rel="stylesheet" href="/css/grid.css">
  <!-- Material Design icon font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" /> </head>

<body>
  <!-- Always shows a header, even in smaller screens. -->
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header ">
    <header class="mdl-layout__header mdl-color--grey-800">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">Dashboard</span>
        <!-- Add spacer, to align navigation to the right -->
        <div class="mdl-layout-spacer"></div>
        <!-- Navigation. We hide it in small screens. -->
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Dashboard</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Device</a>
        <a class="mdl-navigation__link" href="">Rooms</a>
        <a class="mdl-navigation__link" href="">Zones</a>
        <a class="mdl-navigation__link" href="">Settings</a>
      </nav>
    </div>
    <div class="content-grid mdl-grid">
      <div class="demo-card-square mdl-card mdl-shadow--8dp" style="margin:10px;">
        <div class="mdl-card__title mdl-card--expand">
          <h2 class="mdl-card__title-text">Light</h2>
        </div>
        <div class="mdl-card__supporting-text mdl-grid">
          <form action="#">
            This is card for devcie 1
        </div>
        <div class="mdl-card__actions mdl-card--border">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                      View Updates
                      </a>
        </div>
      </div>


      <div class="demo-card-square mdl-card mdl-shadow--8dp" style="margin:10px;">
        <div class="mdl-card__title mdl-card--expand">
          <h2 class="mdl-card__title-text">Fan</h2>
        </div>
        <div class="mdl-card__supporting-text">
          This is card for devcie 2
        </div>
        <div class="mdl-card__actions mdl-card--border">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                      View Updates
                      </a>
        </div>
      </div>

      <div class="demo-card-square mdl-grid mdl-card mdl-shadow--8dp" style="margin:10px;">
        <div class="mdl-card__title mdl-card--expand">
          <h2 class="mdl-card__title-text">Switch Board</h2>
        </div>
        <div class="mdl-card__supporting-text mdl-cell--6-col" style>
          Smart Switch 1
        </div>
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect mdl-cell--6-col" for="switch-1">
                     <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
                     <span class="mdl-switch__label"></span>
                   </label>
        <div class="mdl-card__actions mdl-card--border">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                      View Updates
                      </a>
        </div>
      </div>

</html>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

1 个答案:

答案 0 :(得分：1)

您可以使用grid和mdl-layout-spacer来实现此目的。

参考：https://getmdl.io/components/#layout-section/grid 

<!doctype html>
<html class=" ui-layout-condensed ui-capitalize-values ui-icons-enabled ">

<head>
  <title>thome | DashBoard</title>
  <!-- Material Design icon font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <!-- Material Design Lite -->
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <link rel="stylesheet" href="/css/card.css">
  <link rel="stylesheet" href="/css/grid.css">
  <!-- Material Design icon font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" /> </head>

<body>
  <!-- Always shows a header, even in smaller screens. -->
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header ">
    <header class="mdl-layout__header mdl-color--grey-800">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">Dashboard</span>
        <!-- Add spacer, to align navigation to the right -->
        <div class="mdl-layout-spacer"></div>
        <!-- Navigation. We hide it in small screens. -->
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Dashboard</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Device</a>
        <a class="mdl-navigation__link" href="">Rooms</a>
        <a class="mdl-navigation__link" href="">Zones</a>
        <a class="mdl-navigation__link" href="">Settings</a>
      </nav>
    </div>
    <div class="content-grid mdl-grid">
      <div class="demo-card-square mdl-card mdl-shadow--8dp" style="margin:10px;">
        <div class="mdl-card__title mdl-card--expand">
          <h2 class="mdl-card__title-text">Light</h2>
        </div>
        <div class="mdl-card__supporting-text mdl-grid">
          <form action="#">
            This is card for devcie 1
        </div>
        <div class="mdl-card__actions mdl-card--border">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                      View Updates
                      </a>
        </div>
      </div>


      <div class="demo-card-square mdl-card mdl-shadow--8dp" style="margin:10px;">
        <div class="mdl-card__title mdl-card--expand">
          <h2 class="mdl-card__title-text">Fan</h2>
        </div>
        <div class="mdl-card__supporting-text">
          This is card for devcie 2
        </div>
        <div class="mdl-card__actions mdl-card--border">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                      View Updates
                      </a>
        </div>
      </div>

      <!-- Card with switch -->
  <div class="demo-card-square mdl-grid mdl-card mdl-shadow--8dp" style="margin:10px;">
    <div class="mdl-card__title mdl-card--expand">
        <h2 class="mdl-card__title-text">Switch Board</h2>
    </div>
    <div class="mdl-card__supporting-text mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone">Smart Switch 1</div>
	<div class="mdl-layout-spacer"></div>
	<div class="mdl-card__supporting-text mdl-cell--2-col mdl-cell--2-col-tablet mdl-cell--1-col-phone">
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect mdl-cell--12-col" for="switch-1">
            <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
            <span class="mdl-switch__label"></span>
        </label>
    </div>
    
    <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">View Updates</a>
    </div>
  </div>  <!-- /Card with switch -->

</html>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

相关问题
最新问题