修复Zurb Foundation 3中的列宽？

Question

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

广告图片位于四列div中。该广告是MREC，宽300像素。但是，在iPad上，由于列减少，广告降至236px，这是禁忌。见下面的图片2，当然它在这里看起来相同，但它更小：

我需要它保持在300px。此外，有时广告服务器可能会投放基于iframe的广告（也是300px）。

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

为了让这个工作，我不得不走出基金会一点。这就是你需要的。

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

说明： 我创建了一个广告包装器.ad和一个.container元素。

.ad宽300像素，向右浮动;而.container元素的边距为320px。由于Foundation使用边框大小调整，因此边距会计入整个.container元素的宽度。结果，.ad位于“假边距”内（20个额外px用于空白区域）。这是一个老技巧，它可以在Foundation的.row＆amp; .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;}
}

Answer 2

当我需要修复侧边栏的宽度时，我最终使用calc（）来完成它。我希望我的侧栏位于较小设备的主要内容之下，这样就非常容易。

我的haml布局

.row
  .content.column.large-9
    = yield
  .sidebar.column.large-3
    = render 'sidebar'

样式

.sidebar{
  width: 100%;
}
.content {
  width: 100%;
}
@media #{$small} {
  .sidebar {
    width: 225px !important;
  }
  .content {
    width: 70.2% !important; /* Fallback for older browsers */
    width: calc(100% - 240px) !important;
  }
}

媒体查询参数$ small确实令人困惑，因为它实际上意味着“大于小”。