頂部和底部包含div的位置div

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 - FIDDLE - 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）在容器上設置一個最小高度，使得頂部和底部子組件不重疊。

#container { 
    min-height: 349px; 
} 

看到一個工作示例：http://jsfiddle.net/FaTxw/3/