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

Question

我正在尝试使用Material Design Lite组件构建一个简单的页面，其中包含卡片，但是一个问题困扰了整个页面的布局。如何将mdl card对齐到屏幕的右侧？我尝试在CSS中使用float:right;，然后卡片只向右移动到同一列而不是屏幕。请帮助我将其移动。

<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>

- Akshay Soma

Answer 1

尝试使用 mdl-typography--text-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同样有效。

- MewX

Answer 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>

- ilgazer

---

兄弟，我在卡片上添加间隔后，它不再响应了。有没有其他的替代方案可以让卡片变得响应？ - Akshay Soma

你可以尝试在CSS中将卡片的宽度和高度设置为百分比，以使其具有响应性：.mdl-card { height: 10%; } - ilgazer

Answer 3

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

- bulldozer

---

兄弟，我想把整张卡片移到窗口的右侧。 - Akshay Soma