Javascript ZURB基金会使用12列布局的任一空间 我用Zurb基金会开发了一个网站，当然有12列宽。

我想能够把广告放在我的内容的任何一边，如果它足够宽，否则显示在下面。我能想出最后一点，如果没有足够的空间，把它移到别处

例如：

我曾经尝试过在容器之前浮动div（在标题下等），但是它们总是直接与浏览器窗口对接。我希望它向左浮动，然后在这个范围内向右浮动，这样它就在内容旁边，这样我就可以应用填充/边距，使它们与内容保持一定的距离

想法

谢谢。

可能有一种“更干净”的方法，但我会用绝对定位来解决这个问题。 一些快速的伪代码来展示如何做到这一点

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>

...
..
...
...
...

---

使用class=“hide for small”隐藏大屏幕的div

很难理解您在这里需要什么。你是否试图将广告定位在12栏布局之外？我建议在帖子中添加一些代码，这样我们就可以看到你在做什么。制作一个代码笔（在codepen.io上）会更好。

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

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