Question

我的页面内容有一个主容器DIV，它是水平居中的：

HTML：

<div id="master_container">
  .. my content here ...
</div>

CSS：

#master_container {width: 960px; margin: 0 auto;}

客户希望在master_container之外的页面两侧都有广告。我尝试了各种CSS来尝试定位这些div但是当窗口调整大小时，它们与master_container重叠。此外，当滚动页面时，我被要求让它们浮动。

有人可以指导我找到正确的解决方案吗？提前谢谢......

Answer 1

怎么样：

演示：http://jsfiddle.net/insertusernamehere/Ct5BM/

HTML

<div id="master_container">
    <div class="ad left">Advertising</div>
    <div class="ad right">Advertising</div>
    The real content …
</div>

CSS

<style>

    body {
        width:      100%;

    }

    #master_container {
        position:   relative;
        width:      960px;
        height:     500px;
        margin:     0 auto;
        border:     1px solid red;
    }

    div.ad {
        position:   absolute;
        top:        0px;
        width:      200px;
        height:     400px;
        margin:     0px 0px 0px 0px;
        border:     1px solid blue;
    }

    div.ad.left {
        left:       -220px;
    }

    div.ad.right {
        right:      -220px;
    }

</style>

编辑：工作原理

当你将主要元素定位为相对时，它不会从其内容中取出它的流，但它会为定位，z索引等打开一个新的空间。所以这个容器中具有绝对位置的子元素与其父母的位置。因此，在此示例中，“ad”元素的宽度为200px，左侧为-220px，它在左侧的容器外移动，并添加了一点“边距”。

Answer 2

<强>＆GT;＆GT; DEMO＆lt;＆lt;

[请注意，#master_container]

使用了700px的宽度

1。定位

最重要的CSS是广告的样式和定位，我给了课程.advertis：

.advertis {
    position: fixed; /*creates floating effect */
    top: 20px; /* divs will always stay 20px from top */
    width: 220px;
    padding: 10px;
    background: white;
    border: #ccc 1px solid;
    border-radius: 4px;
}

#left {
    margin-left: -613px; left: 50%; /* positioning of left ads */
} 

#right {
    margin-right: -613px; right: 50%; /* positioning of right ads */
}

我可以听到你想知道：我如何计算我需要的保证金？简单：

获取#master_container的宽度（包括填充）= 720px。除以2 = 360px。添加广告的宽度（包括填充和边框）= 242px。 240px + 360px = 600px。在容器和ad = 11px之间添加您想要的空间（在我的情况下）。

242px (full width of ad) + 360px (half of container) + 11px (space between ad and container) = 613px (margin needed)

2。窗户太小时隐藏

现在，您希望在广告不再适合窗口时隐藏广告。你可以选择：

媒体查询
jQuery（或JavaScript或其他库）

在第一个jsFiddle中我使用了媒体查询（所有浏览器都支持不）。在this小提琴中，我使用jQuery来获得相同的效果。

function widthCheck() {
    var ads = $(".advertis");

    if ($(window).width() < 1225) {
        ads.hide();
    }
    else {
        ads.show();
    }
}

widthCheck(); // Execute onLoad

$(window).resize(function(){
    widthCheck();  // Execute whenever a user resizes the window
});

由您决定选择要使用的是哪一个。我列举了一些优点和缺点，所以你可以自己选择。

专业媒体查询：

现代，进步
即使在JS被禁用时也能正常工作

<强>缺点：

并非所有浏览器都支持

优点jQuery：

支持（和所有浏览器一样好）

<强>缺点：

不起作用
不像媒体查询那样进步

将DIV定位到居中容器的侧面

2 个答案:

HTML

CSS

编辑：工作原理

1。定位

2。窗户太小时隐藏