Question

我有两个元素，一个是容器，宽度为1245px，相对位置和相对于窗口居中（灰色背景不透明度为0.3）第二个是绝对div（#gray-left），简单的矩形，必须在容器后面，它必须位于窗口的左边，元素的右边点必须在容器后面。

为简化这两个元素相互作用的矩形宽度，无论窗口大小如何，都必须始终相同！并且因为容器宽度是固定的，所以＃gray-left必须相对于窗口宽度改变宽度。

是否可以使用CSS，如果不是jQuery。

代码：

#grey-left{
    height: 420px;
    top: 84px;
    left: 0px;
    position: absolute;
    width: ?? ;
}

#container {
    position: relative;
    margin: 0 auto;
    width: 1245px;  
}

感谢您的回复。

Answer 1

以下是我如何做到这一点，而不是诉诸JS：

http://jsfiddle.net/28N5z/3/

HTML

<div id="grey-left">
    <div class="wrapper">
        Perhaps you want some content in here?
    </div>
</div>
<div id="container"></div>

CSS

html, body {
    overflow-x: hidden;
}

#container {
    width: 1245px;
    height: 800px;
    background-color: #ddd;
    opacity: 0.6;
    margin: 0px auto;
    position: relative;
}
#grey-left {
    width: 1000px;
    position: absolute;
    top: 80px;
    right: 50%;
    margin-right: 500px;
    height: 200px;
    background-color: #e5e5e5;
}
#grey-left .wrapper {
    width: 200px;
    position: absolute;
    right: 0;
    top: 0;
}

基本技术是给#grey-left一个很大的宽度，并将其偏移到窗口的中心。然后，您需要隐藏水平溢出以避免使用overflow-x: hidden滚动条。

如果您不需要任何内容，可以删除.wrapper及其样式。

调整大小时，将元素保留在窗口上的水平点上

1 个答案: