修复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和.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;}
}