MDL "advanced" 网格结构

Question

我正在尝试实现与 mdl dashboard example 类似的东西，在桌面视图中，左侧有一张卡片，右侧有两张卡片（如 imgur 相册中的第一张图片），当它更改为平板电脑布局时，它就变成了 imgur 相册中的第二张图片：

它在示例中起作用的原因是因为 img-C 在平板电脑布局中只有 3 的宽度，因为有一个隐藏的 1-col 分隔符来弥补 mdl-grid 造成的缺失 space --无间距。

我的问题是，如果我希望 img-B 和 img-C 在平板电脑布局中都具有 4 列宽度，如何实现这种布局结构？

Answer 1

在设计主题时绝对应该避免使用 !important，但如果您要覆盖 mdl class 布局，我认为使用它没有任何问题。参见：https://css-tricks.com/when-using-important-is-the-right-choice/

让我们将 MDL 示例布局简化为：

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-cell--12-col-desktop" />
  <div class="mdl-cell mdl-grid mdl-grid--no-spacing">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop" />
    <div class="mdl-cell demo-separator mdl-cell--1-col" />
    <div class="mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--12-col-desktop" />
  </div>
</div>

要获得您想要的外观，请在平板电脑视图中隐藏 .demo-separator 并将第三张卡片 class 设置为 4-column-tablet 而不是 3:

<div class="mdl-cell demo-separator mdl-cell--1-col mdl-cell--hide-tablet" />
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop" />

然后您需要重新调整第二行中列的大小。我会在 .mdl-grid--no-spacing 上添加覆盖 class（我们称它为 .grid-central--spacing）：

<div class="mdl-cell mdl-grid mdl-grid--no-spacing grid-central--spacing">

在我的 style.css 中，我可以将样式覆盖为：

@media (max-width: 839px) and (min-width: 480px) {
  .grid-central--spacing .mdl-cell--4-col-tablet {
     width: calc(50% - 8px) !important;
  }
  .grid-central--spacing .mdl-cell--4-col-tablet:first-child {
    margin-right: 8px;
  }
  .grid-central--spacing .mdl-cell--4-col-tablet:last-child {
    margin-left: 8px;
  }
}

现在在平板电脑视图中，两张卡片之间应该有 16px 间距。

MDL "advanced" 网格结构

MDL "advanced" grid structure

html

css

material-design

material-design-lite