responsive-design - 创建一个静态 div 以在 Compass Susy 网格中保存广告？

Question

我必须在我的布局中容纳一个 MREC 广告。广告的宽度为 300 像素，并且无法随着流体网格收缩而调整大小。

此外，广告必须是智能手机上的第一项，在标题块之前。因此，在断点上，我将其设置为 omega 以将其推送到标题“之后”，如此屏幕截图所示（灰色规则只是为了更容易查看）。

标题是 8 列，广告是 4。除了 ipad 上的广告列和广告缩小到 300 像素以下，一切都很好，我们不允许这样做。那么，除了广告容器之外，如何保持一切流畅呢？

Answer 1

Set max/min widths on the container?

Answer 2

这并不难做到，但这意味着顶部的网格不会与下面的灵活网格完全匹配。我认为这不是问题。您必须使用一些函数来布置这两个元素，但其他一切都可以像以前一样完成。

您可以将广告的灵活性保持在最小宽度：

.ad {
  @include span-columns(4 omega);
  min-width: 300px; // you can use any width you want.
}

或者您可以使广告完全静止：

.ad {
  float: right;
  width: columns-width(4); // you can use any width you want.
}

重要的部分是您不能在标题上设置列宽。

您还有其他一些选择。最简单的可能是将右边距和填充设置为等于静态广告尺寸（加上装订线）：

.headline {
  margin-right: columns-width(4) + $gutter-width;
}

或者，如果您希望该排水沟弯曲，请尝试：

.headline {
  margin-right: columns-width(4);
  padding-right: gutter();
}

您可以添加clear: both;到主要内容以确保它清除标题和广告。

如果这种方法对您不起作用，请尝试为标题创建一个新的“格式上下文”。经典技术之一是简单的overflow: hidden;。Nicole Sullivan 有一篇很好的博客文章，介绍了他们如何为 oocss 做到这一点，但它变得有点复杂，你可能不需要所有这些。

更新：

所有这些解决方案都要求广告首先出现在标记中。解决这个问题的唯一方法是您知道广告的高度。在这种情况下，您可以绝对定位广告而不是浮动它，以相同的方式为其创建空间，并在标题（或行容器，如果有的话）上设置最小高度。