将 div 定位在包含 div 的顶部和底部

Question

我有一个容器 div，其中的内容有时需要除以class="top"和class="bottom"。显然没有float:topor 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）在容器上设置一个最小高度，这样顶部和底部的孩子就不会重叠。

#container {
    min-height: 349px;
}

查看一个工作示例：http : //jsfiddle.net/FaTxw/3/