html - 如何在流体布局中使用固定位置

Question

我有一个流体布局的 WP 博客，主要内容位于居中的 div 中，大约 1000 像素宽。

现在我想在每一侧放置一个广告横幅区域，并且我想在该位置使用固定，以便这些广告在用户向下滚动博客时保留。

我见过有类似广告的博客，但它们没有流畅的布局，而是可以使用 position: fixed 和 width:Ypx left:-Ypx 这使得他们的广告始终很好地固定在左侧。

虽然采用流畅的布局，但似乎这是不可能的？

这就是我要模仿的效果，看看两边怎么不向下滚动...

http://radarmagazine.se错误的站点

---更新--------

我放错了示例站点..这是固定位置的站点:

这是示例站点: http://freshnet.com

Answer 1

不用 JS 也可以。这是我的方法。

基本上，您需要设置包含的 div，然后克隆它并将其设置在专用于 position: fixed; 的 div 中固定的 div 将与您实际包含的 div 共享相同的样式并相应地缩放。

<div class="ads"> <!-- Dedicated position: fixed; -->
    <div class="wrap"> <!-- Cloned container for positioning of Ads -->
        <img src="http://placehold.it/100x750&text=Ad1" />
        <img src="http://placehold.it/100x750&text=Ad2" /> 
    </div>
</div>

<div class="wrap"> <!-- Main container with a z-index of 1 -->
    <img class="main" src="http://placehold.it/960x300" />
</div>

放置到位后，您可以将“广告”相应地放置在固定的 div 中，并将它们放置在响应式/固定容器之外，以便它们依附于它 - 给人一种它们依附于您的实际包装的错觉。在您的 max-width 达到后，固定广告将被推出视口(viewport)。

http://jsfiddle.net/m0v3vqcp/ - fiddle

Full Screen/ With Their Ads