css - 修复 Zurb Foundation 3 中的列宽？

Question

我有一个布局，我的其中一个列包含一个广告。参见图 1:

广告图片位于四列 div 中。该广告是一个 300 像素宽的 MREC。然而，在 iPad 上，由于列数减少，广告将缩小到 236 像素，这是一个禁忌。见下图2，当然这里看起来是一样的，只是小了点:

我需要它保持在 300 像素。此外，有时广告服务器可能会转换基于 iframe 的广告(也是 300 像素)。

所以 div 不需要缩小宽度。

我尝试向其中添加一个类并将 css 设置为 min-width:300px，但随后在 iPad 上它突出了右边缘；另一个 div 没有相应地收缩足够。参见图 3:

那么，如何确保我的广告中的 div 不会在 iPad 上调整大小？

编辑:此外，当我使用推拉反转列顺序时，问题似乎更加复杂。我这样做是因为我需要广告首先出现在手机上，然后出现在其他平台上:

<div class="row">
<div class="four columns ad push-eight">
    <img src="http://placehold.it/300x300">
</div>
<div class="eight columns pull-four">
  <h1>Bacon ipsum dolor sit amet tri-tip shankle chicken leberkas beef pork</h1>
</div>

Answer 1

为了让它发挥作用，我不得不稍微走出 Foundation。这是您需要的。

示例:http://cdpn.io/Kypen

解释:我创建了一个广告包装器 .ad 和一个 .container 元素。

.ad 300px 宽，向右浮动；而 .container 元素被赋予了 320px 的宽边距。由于 Foundation 使用 border-box sizing，因此 margin 被计入整个 .container 元素的宽度。结果，.ad 位于“假边距”内(额外的 20 像素用于空白)。这是一个古老的技巧，它在 Foundation 的 .row 和 .column 元素中工作得很好，此外它也不会影响嵌套行的创建。

我还添加了一个媒体查询，可以使用它来改变低分辨率下的行为。

.ad
{
  float:right;
  width:300px;
}
.container
{
  position:relative;
  margin-right:320px;
}
@media only screen and (max-width: 767px)
  {
  .ad
  {float:none;}
  .container
  {margin:0;}
}