Question

我一直在尝试添加两个以一个接一个为中心的div，两个aditional div在最后一个的相同位置但隐藏......这里的一个大问题是我希望页面具有弹性......

有谁知道我该怎么做？

Answer 1

这取决于你究竟需要做什么，但基本上你可以通过将它们全部包装在一个居中的容器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>

CSS：

.container {
    width: 25%; /* This is arbitrary, make it your desired width */
    height: 25%; /* if you don't want explicit height, you'll need a clearfix */
    position: relative;
}
.centered {
    margin-left: auto;
    margin-right: auto;
}
.left {
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
.right {
    width: 50%;
    position: absolute:
    top: 0;
    left: 50%;
}
.hidden {
    display: none; /* or opacity: 0, or however else you want to do it */
}

Answer 2

也许试试这个。我没有测试过，但值得一试，我想我正在完成你想要的东西。

<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;
}

Answer 3

此解决方案的好处是div可以是任何宽度，并且仍然会分割屏幕的中心。

CSS

.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;  }

HTML

<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>

Answer 4

我认为你所寻找的是好老的

display: inline-block;

2对div在相同位置w /弹性布局

4 个答案: