Zurb Foundation 使用 12 列布局两侧的空间答案

【问题标题】：Zurb Foundation Using the space either side of a 12 column layoutZurb Foundation 使用 12 列布局两侧的空间
【发布时间】：2013-10-26 16:57:58
【问题描述】：

我使用 Zurb Foundation 开发了一个站点，当然它有 12 列宽。

如果内容足够宽，我希望能够在内容的任一侧放置广告，否则在下方显示。最后一点，如果没有足够的空间，我可以把它移到别处。

一个例子是这样的：Zurb Template

我尝试过在容器之前（在标题等）之前浮动 div，但是这些总是与浏览器窗口对接。我希望它向左浮动，然后在其中向右浮动，因此它位于内容旁边，因此我可以应用填充/边距以使它们与内容保持一定距离。

想法？

谢谢。

【问题讨论】：

真的很难理解你在这里需要什么。您是否尝试在 12 列布局之外放置广告？我建议将您的一些代码添加到帖子中，以便我们可以看到您在做什么。制作一个 codepen（在 codepen.io）会更好。

标签： javascript html css zurb-foundation

【解决方案1】：

可能有一种“更清洁”的方式，但我只是通过使用绝对定位来解决这个问题。一些快速的伪代码来展示你如何做到这一点。

HTML

<div class="row">
   <div style="position: relative;">
       <div id="adsL-container">L ads here</div>
       <div id="adsR-container">R ads here</div>
   </div>
</div>

CSS

.row #adsL-container, .row #adsR-container {
   position: absolute;
   top: 0;
   width: 300px;
}
.row #adsL-container {
   left: -300px;
}
.row #adsR-container {
   right: -300px;
}

【讨论】：

【解决方案2】：

<div class="row">
<div class="large-2 columns hide-for-small ads">
 ...
</div>
<div class="large-8 columns small-12 columns">
..
 </div>
<div class="large-2 columns hide-for-small ads">
...
 </div>
</div>
<div class="small-12 columns show-for-small ads">
 ...
</div>
    <div class="small-12 columns show-for-small ads">
 ...
</div>

使用 class="hide-for-small" 为大屏幕隐藏 div

【讨论】：