div를 포함하는 div의 위와 아래에 위치 divs

Question

콘텐츠가있는 컨테이너 div가 있습니다.이 콘텐츠는 때때로 class="top" 및 class="bottom"으로 나눌 필요가 있습니다. 분명히 아무 float:top 또는 float:bottom, 그래서 html/css 혼자서 이것을 달성하는 가장 좋은 방법은 무엇입니까?

예 :

<div class="content"> 
     <div class="left"> 
      <a href="#"><img src="img/home.jpg" alt="salon home"></a> 
     </div><!-- end left --> 
     <div class="center"> 
      <a href="#" class="top"><img src="img/about.jpg" alt="about salon"></a> 
      <a href="#" class="bottom"><img src="img/services.jpg" alt="salon service"></a> 
     </div><!-- end center --> 
     <div class="right"> 
      <a href="#" class="top"><img src="img/products.jpg" alt="salon products"></a> 
      <a href="#" class="bottom"><img src="img/contact.jpg" alt="contact salon"></a> 
     </div><!-- end right --> 
    </div><!-- end content --> 

#container .content { 
    margin-top: 115px; 
} 

#container .content .left { 
    float: left; 
    width: 307px; 
} 

#container .content .center { 
    float: left; 
    padding-left: 19px; 
    width: 307px; 
} 

#container .content .right { 
    float: right; 
    width: 307px; 
} 

ETA - 뿐인 - 당신은 몇 가지 간단한 단계를 수행 할 수 있습니다 http://jsfiddle.net/FaTxw/2/

Answer 1

.

1) 부모 컨테이너 상대 위치를 추가

#container .content .left, 
#container .content .center, 
#container .content .right { 
    position: relative; 
} 

2)의 절대 위치의 하위 요소를 설정한다.

#container .content .top, 
#container .content .bottom { 
    position: absolute; 
} 

3) 요소를 위와 아래 위치로 설정하십시오.

#container .content .top { 
    top: 0; 
} 

#container .content .bottom { 
    bottom: 0; 
} 

4) 100 %

html, body, #container, .content, .left, .right, .center { 
    height: 100%; 
} 

5) 상부 및 하부 아이들이 중첩되지 않도록 용기에 최소 높이를 설정하는 모든 부모 컨테이너의 높이를 설정한다. http://jsfiddle.net/FaTxw/3/