Question

我有一个包含多个元素的标题。最重要的部分是滑块，横幅覆盖和3个所谓的“pijlers＆＃39;”。滑块和横幅覆盖完美响应，但是“pijlers＆＃39;别＆＃39;吨。当屏幕宽度为全宽时，它们处于正确的位置，但是当您将屏幕调整到较小的宽度时，它们不会向左移动，因此它们会掉落到屏幕上。

请不要介意使用的图片，它仅用于演示目的

小提琴：http://jsfiddle.net/kzv8L6yn/

CSS

body {
    width:100%;
    max-width:1000px;
    margin: 0;
    height:auto;
}
header {
    width:100%;
    height:600px;
}
.headerslider {
    width:100%;
    height 100%;
    :
}
.site-navigation {
    width:100%;
}
#custom-login {
    float:left;
    margin-left:25px;
}
.main-navigation, .headerslider, #banner-overlay, #pijler-wrapper {
    position : absolute;
    top : 0;
    left : 0;
}
#banner-overlay {
    z-index : 10;
    width:100%;
}
#pijler-wrapper {
    z-index : 10;
    width:100%
}
.pijler {
    background-color : white;
    width : 27%;
    position : absolute;
    opacity : 0.8;
}
.pijler:hover {
    opacity : 1.0;
}
#safe {
    top : 170px;
    left : 900px;
}
#durable {
    top : 252px;
    left : 900px;
}
#innovative {
    top : 334px;
    left : 900px;
}

HTML

<div id="page" class="site">
    <header class="site-header" role="banner"> <a href="#"><img src="http://tsk.nu/en/wordpress/wp-content/themes/atahualpa373/images/header/TSK-header1_1280x150.gif" id="banner-overlay"/></a>

        <div id="pijler-wrapper"> <a href="#"><img src="http://australianbluegrass.com/wp-content/uploads/2009/03/360x80-banner.jpg" class="pijler" id="safe"/></a>
 <a href="#"><img src="http://australianbluegrass.com/wp-content/uploads/2009/03/360x80-banner.jpg" class="pijler" id="durable"/></a>
 <a href="#"><img src="http://australianbluegrass.com/wp-content/uploads/2009/03/360x80-banner.jpg" class="pijler" id="innovative"/></a>

        </div>
        <div class="headerslider">
            <img src="http://www.markbsplace.net/images/CloudsOnTheHorizon-1280-x600.jpg" id="headerslider" />
        </div>
    </header>
    <div>

Answer 1

你绝对定位piljer，所以无论你做什么，它们总是与它们所在的容器左边（900px）的确切距离，或者实际上是最近的静止位置。< / p>

为了让他们做出回应，您应该使用百分比定位，或者如果他们应该拥抱右手边，请将其从右侧定位，具体取决于您尝试实现的效果类型。例如：

#durable {
    top : 252px;
    right : 50px;
}

响应式定位元素

1 个答案: