3

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

图像1

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

图2

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

所以那个 div 不需要缩小宽度。

我尝试添加一个类并将css设置为min-width：300px，但是在iPad上它伸出右边缘；另一个 div 没有相应地缩小。见图3：

图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>

4

2 回答 2

8

为了让它发挥作用，我不得不稍微走出基金会。这就是你需要的。

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

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

是.ad300px 宽并向右浮动；而.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;}
}
于 2013-01-29T17:46:54.923 回答
0

当我需要修复侧边栏的宽度时，我最终使用了 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 确实令人困惑，因为它实际上意味着“大于小”。

于 2013-10-04T22:25:29.487 回答