2 пары div в одной позиции с упругой раскладкой

Question

Я пытался добавить 2 деления по центру один рядом с другим с двумя дополнительными делителями в той же позиции, что и последние, но скрытые ... большая проблема в том, что я хочу, чтобы страница была эластичной ...

Кто-нибудь знает, как я могу это сделать?

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

Я думаю, что вы ищете старый добрый

display: inline-block;

Answer 3

Преимущество этого решения в том, что div s может иметь любую ширину и все равно будет разбивать центр экрана.

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

Может быть попробовать это.Я не проверял это, но это стоит попробовать, и я думаю, что выполняю то, что вы ищете.

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