Question

您好我正在尝试制作两个div来填充我网站的左侧和右侧，内容是以中间为中心的固定宽度div（960像素）。我希望两个外部div是带有可点击背景图像的横幅。

我搜索过，发现我可以使用CSS calc来做到这一点，但它似乎不是最好的方法，因为它并不总是对所有浏览器都有效（如IE 11）

我认为最好的方法是使用Javascript，但我没有经验，有人可以帮忙吗？

View my site

＆lt; = 左侧横幅。右横幅。 =＆gt;

（了解我正在尝试做什么）

非常感谢，我希望很清楚。英语不是我的母语

Answer 1

首先，您不需要Javascript来执行此操作。

我会在您的内容中使用position:absolute;创建两个元素，并将position:relative;添加到内容div。然后将它们推到两侧：

<强> DEMO

（您需要调整width和height）

Answer 2

我真的不知道你想要什么，因为你的问题有点令人困惑，你没有指定图像是否应该与中心div或浏览器边界连接，但我这符合你的需求（如果我错了，请纠正我。我使用CSS制作它，因为在这种情况下不需要使用javascript，因为这是一个简单的问题，我认为没有兼容性问题。

<强> HTML：

<img class="left" src="http://www.rollingstoned.nl/wp-content/themes/zine/images/leftbanner.png " />

<img class="right" src="http://www.rollingstoned.nl/wp-content/themes/zine/images/rightbanner.png" />

<div class="center"></div>

<强> CSS：

* {
    margin:0;
}
.right {
    position:absolute;

    left:50%;
    margin-left:40px; /* Half of .center width */

    height:100%;
}
.center {
    z-index:1;
    position:absolute;

    height:100%;
    width:80px;

    left:50%;
    margin-left:-40px;

    background:#fff;
    box-shadow:0 0 25px rgba(0, 0, 0, 0.25);
}
.left {
    position:absolute;

    left:50%;
    margin-left:-374px; /* .right width + half of .center width */

    height:100%;
}

Updated JSFiddle Demo.

下次，请提供您想要的内容的图片演示，或者您尝试过的JSFiddle。

Answer 3

这个怎么样？

http://jsfiddle.net/kimiliini/5ZhpC/

替代固定图像：

http://jsfiddle.net/kimiliini/caRPV/

CSS：

*{
    margin : 0;
    padding: 0;
}
p {
    margin: 15px;
}
#wrap {
    position: relative;
    width   : 100%;
    margin  : 0 auto;
}
#center {
    position: absolute;
    width   : 300px;
    margin  : 0 auto;
    left    : 0;
    right   : 0;
    z-index : 1000;
    background :#fff;
}
#left,
#right {
    position: relative;
    overflow: hidden;
    width   : 50%;
    z-index : 1;
}
#left {
    float   : left;
}
#right {
    float   : right;
}
#left img {
    float : right;
    margin-right: 150px;
}
#right img {
    float : left;
    margin-left: 150px;
}
#left img,
#right img {
    width: 300px;
}

HTML：

<div id="wrap">
    <div id="left">
        <img src="http://www.rollingstoned.nl/wp-content/themes/zine/images/leftbanner.png "/>
    </div>
    <div id="right">
        <img src="http://www.rollingstoned.nl/wp-content/themes/zine/images/rightbanner.png"/>
    </div>
    <div id="center">
        <p>
            Fruit is gezond, dat hoef je Carrie niet te vertellen. Om haar dagelijkse dosis vitamines wat op te leuken, stopt ze graag een extraatje in haar appel. De befaamde cannabis & appel combi dus, volgens ons een bijzonder gezonde manier om de dag mee te beginnen!
        </p><p>
        Fruit is gezond, dat hoef je Carrie niet te vertellen. Om haar dagelijkse dosis vitamines wat op te leuken, stopt ze graag een extraatje in haar appel. De befaamde cannabis & appel combi dus, volgens ons een bijzonder gezonde manier om de dag mee te beginnen!
        </p><p>
        Fruit is gezond, dat hoef je Carrie niet te vertellen. Om haar dagelijkse dosis vitamines wat op te leuken, stopt ze graag een extraatje in haar appel. De befaamde cannabis & appel combi dus, volgens ons een bijzonder gezonde manier om de dag mee te beginnen!
        </p>
    </div>
</div>

Answer 4

谢谢大家，我用左边的方式表达了它：50％和margin-left：X px标签。它现在正在运作。我还使用了onclick =“window.open（'http://sensiseeds.com/nl/cannabis-zaden/buiten'）”style =“cursor：pointer;”我的div标签中的属性，让它以正确的方向链接。像魅力一样工作！

看一下我的网站，看看它在行动中（我的问题中有一个链接，我不想要不必要的垃圾邮件）。

非常感谢你们的帮助，如果没有你们的话我就不会这样做了; - ）

根据屏幕宽度划分宽度（中间固定div）

4 个答案: