css - 如何定位作为 960 网格系统主容器的外部 div

Question

我正在为网站使用 12 列 960 像素的网格系统。从我从另一个网站截取的屏幕截图可以看出，我的客户希望接受网站两侧的广告。

问题 1: 我想过让一个外部 div 托管 container_12 div。在那种情况下，我可以通过 css 给它一个背景图片，并将该图片放在一个 anchor 标记中，以便在点击它时将用户重定向到广告所有者的页面。

这是我的代码:

<div style="width:100%; height:100%; min-height:100%; position:fixed; z-index:999; overflow:auto; background-image:url('img/960.png');"></div>
    <div class="container_12" style="z-index:1;">
        <div class="grid_12 rowAdd bgE">
            <div class="txtA" style="line-height:25px;">ADD ROW</div>
        </div>
    </div>
</div>

产生图 1 中的结果。container_12 没有居中，其中的内容根本不可点击。

问题 2:

我的客户还希望在左右两侧都有相邻的 div 来托管其他一些广告。 Div 应为 220 像素宽。他还希望 div 要么是“固定的”，要么是“绝对定位的”。我迷路了，因为我还没有解决第一个问题。非常感谢您的帮助。

图一:

Answer 1

侧边栏

Codepen Demo

基本 HTML

<div class="container">

</div>

<div class="left"></div>
<div class="right"></div>

基础CSS(宽度一些颜色供视觉引用)

.container {
  width:960px;
  margin: 0 auto;
  background-color: #c0ffee;
  height:600px;
}

.left, .right {
  position:absolute;
  height:600px;
  width:220px;
  top:0;
}

.left {
  right:50%;
  margin-right:480px;
  background-color: grey;

}

.right {
 left:50%;
 margin-left:480px;
 background-color: red;  
}