0

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

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

这是我的代码：

<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 要么是“固定的”，要么是“绝对定位的”。我迷路了，因为我还没有解决第一个问题。我会很感激你的帮助。

图片1： 在此处输入图像描述

4

1 回答 1

0

侧边栏

Codepen 演示

基本 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;  
}
于 2013-11-02T17:35:53.640 回答