Javascript 同一位置2对DIV，带弹性布局

我一直在尝试添加两个div，一个居中，另一个居中，两个传统div位于上一个div的相同位置，但隐藏。。。这里最大的问题是我希望页面有弹性

---

有人知道我该怎么做吗？

这取决于你到底需要做什么，但基本上你可以通过将它们都包装在一个居中的容器div中，然后计算出内部div的布局来完成。弹性意味着一切都必须以百分比为单位

这应该让你开始：

<div class="centered container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="left hidden"></div>
    <div class="right hidden"></div>
</div>

---

也许试试这个。我没有测试出来，但值得一试，我想我已经完成了你想要的

<div class="wrapper">
<div>
<!-- DIV ONE -->
</div>
<div>
<!-- DIV TWO -->
</div>
<div class="hidden three">
<!-- DIV THREE -->
</div>
<div class="hidden four">
<!-- DIV FOUR -->
</div>
</div>

CSS
.wrapper{
width: 100%;
max-width:1500px;
margin: 0 auto;
position:relative;
}
div{
float:left;
width: 50%;
}
.hidden{ visibility:hidden; 
position: absolute;
top:0; 
}
.hidden.three {
left:0;
}
.hidden.four{
right: 0;
}

CSS
.包装纸{
宽度：100%；
最大宽度：1500px；
保证金：0自动；
位置：相对位置；
}
div{
浮动：左；
宽度：50%；
}
.hidden{可见性：隐藏；
位置：绝对位置；
排名：0；
}
.三{
左：0；
}
.四{
右：0；
}

此解决方案的好处是

div可以是任意宽度，并且仍然会分割屏幕中心

CSS

HTML


左一层
第一层，对吗
第二层左侧
第二层，对吗
我想你要找的是好的旧的

display: inline-block;

我不知道你在问什么。两个分区相邻，每个分区内有另一个分区？遗憾的是，它不起作用。。。我正在尝试使用jQuery进行淡入淡出图像交换。。。当我将鼠标移到左div上时，左隐藏的div显示如下：_（我最喜欢的关于你要做什么的指南来自于古老的A列表。这个技巧包括绝对定位你的“鼠标盖”还有一些jQuery插件可以找到元素的大小/位置，但我会留给你去弄清楚。这篇文章：
inline block
在IE 6和7中的支持是不完整的
.layer .left, .layer .right {
    position: absolute;
    width: 40%;
    height: 50%;
}

#layer2 .left, #layer2 .right {
    z-index: 2;
    border: 1px dashed black;
    display: none;
}

.left  { margin-right: 50%; right: 0; background-color: blue; }
.right { margin-left: 50%;  left: 0;  background-color: red;  }

<div id="layer1" class="layer">
    <div class="left">Layer 1 left</div>
    <div class="right">Layer 1 right</div>
</div>
<div id="layer2" class="layer">
    <div class="left">Layer 2 left</div>
    <div class="right">Layer 2 right</div>
</div>

display: inline-block;