祖尔布基金会 使用 12 列布局的任一侧的空间

Zurb Foundation Using the space either side of a 12 column layout

本文关键字：布局 任一侧 空间 基金会 使用      更新时间：2023-09-26

我使用Zurb基金会开发了一个网站，当然有12列宽。

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

一个例子是这样的：Zurb 模板

我尝试过在容器之前（在标题等下）浮动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>

.CSS

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

使用 class="隐藏小"隐藏较大的屏幕的div

相关文章：