如何将 Material Design Lite 卡片对齐到右侧答案

【问题标题】：How to align Material Design Lite cards to right hand side如何将 Material Design Lite 卡片对齐到右侧
【发布时间】：2017-05-22 22:34:50
【问题描述】：

我正在尝试构建一个简单的页面，其中包含使用 Material Design lite 组件的卡片，但一个问题困扰着页面的整个布局。如何对齐 mdl 卡 在屏幕的右侧？我试过 float:right; 在 css 中，然后卡片只会在同一个 col 中向右移动，而不是在屏幕上。帮我换一下

<div class="mdl-cell mdl-cell--6-col">
    <div class="demo-card-wide mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">Welcome</h2>
        </div>
        <div class="mdl-card__supporting-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Mauris sagittis pellentesque lacus eleifend lacinia...
        </div>
        <div class="mdl-card__actions mdl-card--border">
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                Get Started
            </a>
        </div>
        <div class="mdl-card__menu">
            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                <i class="material-icons">share</i>
            </button>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css css-float material-design material-design-lite

【解决方案1】：

试试这个类mdl-typography--text-right，这样，那个单元格中的内容就会有right的对齐方式：

<div class="mdl-cell mdl-cell--6-col mdl-typography--text-right">
    <div class="demo-card-wide mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">Welcome</h2>
        </div>
        <div class="mdl-card__supporting-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Mauris sagittis pellentesque lacus eleifend lacinia...
        </div>
        <div class="mdl-card__actions mdl-card--border">
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                Get Started
            </a>
        </div>
        <div class="mdl-card__menu">
            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                <i class="material-icons">share</i>
            </button>
        </div>
    </div>
</div>

反之亦然：mdl-typography--text-center 和 mdl-typography--text-left 也可以。

【讨论】：

【解决方案2】：

在卡片左侧使用 mdl-layout-spacer 应该会有所帮助。 mdl-layout-spacer 尽可能多地占用空间。

<div class="mdl-grid">
  <div class="mdl-layout-spacer"></div>
  <div class="mdl-cell mdl-cell--6-col">
    <div class="demo-card-wide mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">Welcome</h2>
      </div>
      <div class="mdl-card__supporting-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Mauris sagittis pellentesque lacus eleifend lacinia...
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
          Get Started
        </a>
      </div>
      <div class="mdl-card__menu">
        <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
          <i class="material-icons">share</i>
        </button>
      </div>
    </div>
  </div>
</div>

【讨论】：

兄弟，我在卡上添加间隔后，卡没有响应。有没有其他方法可以让卡片响应？
您可以尝试在 CSS 中将卡片的宽度和高度设置为百分比，以便响应：.mdl-card { height: 10%; }

【解决方案3】：

要对齐文本，请尝试使用：text-align:right;

【讨论】：

老兄，我想把整张卡片移到窗口的右侧