html로 레이아웃 페이지

Question

에 코드의 첫 번째 요소,하지만 마지막으로 나는 다음 HTML 코드 (jsFiddle)가? 시각적으로 만, html 레이아웃은 동일하게 유지됩니다. 그것은 일종의 서구입니다.

Answer 1

절대 위치를 사용하면 가능합니다. 그러나 당신이 당신의 레이아웃을 아프게하지하기 위해 미리 정의 된 높이를 가지고 있어야합니다

.content { 
    width: 400px; 
    height:200px; 
    margin: 0 auto; 
    position:relative; 
} 

.first-block { 
    background: coral; 
    position:absolute; 
    bottom:0; 
} 

.second-block { 
    background: #DEDEDE; 
    position:absolute; 
    top:0; 
} 

여기 jsFiddle demo

Answer 2

이 float과 margin 속성을 사용하여 가능하다.

두 개의 divs 두 개를 가운데에 띄우고 가운데에 clear:both 두 개를 겹치기 만하면됩니다. 완료되면 margin-top을 양수와 음수 값과 함께 사용하여 divs을 첫 번째 코드가 두 번째 코드보다 아래에있는 것처럼 두 번째 코드에 삽입합니다.

CSS

.content { 
    width: 400px; 
    margin: 0 auto; 
} 

.first-block { 
    background: coral; 
    margin-top:300px; 
    float:left; 
} 

.second-block { 
    background: #DEDEDE; 
    margin-top:-300px; 
    float:right; 
} 

HTML

<div class="content"> 
    <div class="first-block"> 
     Mauris at tortor vel nulla rutrum porta. Etiam non condimentum velit. Phasellus turpis magna, sagittis at porta et, tincidunt id magna. Maecenas hendrerit suscipit massa, at consectetur magna tempor et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Etiam accumsan. 
    </div> 
    <div style="clear:both;"></div> 
    <div class="second-block"> 
     Suspendisse suscipit tortor eu nulla interdum sit amet ultricies ante imperdiet. Donec varius adipiscing lectus in suscipit. Nunc risus arcu, luctus nec tempor porttitor, sodales eget lectus. Vestibulum imperdiet massa in ligula pellentesque eget egestas dui facilisis. Nunc commodo lacus at nibh tristique sodales 
    </div> 
</div> 

Heres a fiddle demo for you!