동일한 위치에서 탄력적 인 레이아웃을 가진 두 쌍의 divs

Question

두 divs를 가운데에 추가하고 divs 두 개를 마지막 divests의 같은 위치에 두 개 추가했으나 숨겨 놨습니다 ... 큰 문제는 여기에 있습니다. 내가 탄력있는 페이지를 원한다는 것입니다 ...

나는 이것을 어떻게 할 수 있습니까?

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

나는 당신이 찾고있는 것은없는 Doctype에 대한

display: inline-block;