javascript - Zurb Foundation 使用 12 列布局两侧的空间

Question

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

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

一个例子是这样的：Zurb Template

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

想法？

谢谢。

Answer 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;
}

Answer 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