Html MDL“；“高级”；网格结构

我正在尝试实现类似的功能，在桌面视图中，左侧有一张卡，右侧有两张卡（如imgur相册中的第一张图像）， 当它更改为平板电脑布局时，它就像imgur相册中的第二幅图像：

它在本例中起作用的原因是，img-C在平板电脑布局中的宽度仅为3，因为有一个隐藏的1列分隔符来弥补mdl网格所造成的空间缺失——没有间距

---

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

您绝对应该避免

！重要信息

当您设计主题时，但如果您覆盖了

mdl类

布局，我认为使用它没有什么错。见：

让我们将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>

然后需要重新调整第二行中列的大小。我将在

.mdl网格上添加一个覆盖类--无间距

（我们称之为

.grid central--间距

）：

---

现在平板电脑视图中的两张卡之间应该有一个

16px

间距。

您绝对应该避免

！重要信息

当您设计主题时，但如果您覆盖了

mdl类

布局，我认为使用它没有什么错。见：

让我们将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>

然后需要重新调整第二行中列的大小。我将在

.mdl网格上添加一个覆盖类--无间距

（我们称之为

.grid central--间距

）：

---

现在平板电脑视图中的两张卡之间应该有

16px

间距。

您的意思是希望平板电脑视图中的三张卡布局与桌面视图相同，即左侧的卡-a、右侧的卡-B和卡-C？否，在平板电脑视图中，我希望card-A有自己的col，card-B和card-C共享一个col，我通过下面的一些肮脏的修复程序设法运行了一些东西，但我认为一定有更好的方法（也听说应该不惜一切代价避免“！important”

@media（最大宽度：839px）和（最小宽度：480px）{.card width fix{width:calc（50%-8px）！重要；}}

我仍然不清楚您的目标。请参见：。您是要使布局看起来像第一个图像还是第二个图像？两者都：）…在桌面视图中，它应该看起来像第一张图像，而在平板电脑视图中，它应该像第二张图像。您的意思是，您希望平板电脑视图上的三张卡布局与桌面视图相同，即左侧的卡-A，右侧的卡-B和卡-C？不，在平板电脑视图中，我希望卡-A有自己的颜色，而卡-B和卡-C是sh是一个col，我通过下面的一些肮脏的修复程序设法让它运行，但我认为一定有更好的方法（也听说应该不惜一切代价避免“！important”

@media（最大宽度：839px）和（最小宽度：480px）{.card width fix{width:calc（50%-8px）！important；}

我还不清楚你的目标。请看：。你是想让布局看起来像第一个图像还是第二个图像？两者都是：）…在桌面视图中，它应该像第一个图像，在平板电脑视图中，它应该像第二个图像顺便说一句，我从你的回答和解决方案中学到了很多（这比我的要好得多），很高兴知道我不需要担心！重要提示：）…mdl cell--hide-x将来肯定也会派上用场..再次感谢：）顺便说一下，我从你的答案和解决方案中学到了很多（比我的好得多），很高兴知道我不需要担心！重要：）。。mdl cell——hide-x在未来肯定会派上用场。。再次感谢：）

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

@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;
  }
}