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

Question

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

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

我已经看到了类似广告的博客，但他们没有流体布局，而是可以使用position：fixed和width：Ypx left：-Ypx这使得他们的广告始终固定在左侧。

虽然流体布局看起来这是不可能的吗？

这是我试图模仿，看看双方都不向下滚动的效果......

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

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

我把错误的示例站点..这是一个固定的位置：

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

Answer 1

这是可能的，而不JS。这是我的方法。

基本上，你要设置你的包含分区，然后克隆它，并致力于position: fixed;这种方式，固定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> 

一旦这项工作到位，你可以相应的固定格内放置你的“广告”，而他们的反应/固定容器的突出位置，使他们坚持吧 - 给，他们正在坚持的幻觉你的实际包装。在达到max-width后，固定广告将被推出视口。

http://jsfiddle.net/m0v3vqcp/ - 小提琴

Full Screen/ With Their Ads

Answer 2

可以使用一些JavaScript，获取window.resize事件上的内容宽度，然后根据该值在x轴上更新广告位置。我做了一个JSFiddle来说明如何实现这一点。

http://jsfiddle.net/r86r6j1f/

Answer 3

您可以使用在body填充，以使房间的横幅，一个简单的例子：

http://jsfiddle.net/dpcd3c1b/

Answer 4

我不相信你需要使用Javascript吧。你应该可以用一对相对定位的浮标来完成，并且位置固定。

http://jsfiddle.net/9ov32nkd/1/

body, html { 
    margin: 0; 
    padding: 0; 
} 

#wrapper { 
    min-width: 960px; 
    position: relative; 
    margin: 0 auto; 
} 

#inner { 
    position: absolute; 
    width: 960px; 
    left: 50%; 
    margin-left: -480px; 
} 

.content { 
    width: 720px; 
    padding: 20px; 
    background-color: #CCC; 
    margin: 0 auto; 
    float: left; 
} 

.banner { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 

.banner1 { 
    float: left; 
} 

.banner1 .inner, 
.banner2 .inner { 
    background-color: #EFEFEF; 
    height: 300px; 
    width: 100px; 
    position: fixed; 
    top: 0; 
} 

.banner2 { 
    float: right; 
}