位置div在包含div的顶部和底部 [英] position divs at top and bottom of containing div

问题描述

我有一个容器div，其内容有时需要除以 class =top和 class =bottom / code>。显然没有 float：top 或 float：bottom ，所以什么是最好的方式来实现这个与html / css单独？

I have a container div which has content that will sometimes need to be divided by class="top" and class="bottom". Obviously there is no float:top or float:bottom, so what is the best way to achieve this with html/css alone?

例如：

<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/

ETA - FIDDLE - http://jsfiddle.net/FaTxw/2/

推荐答案

您可以通过几个简单的步骤来完成。

You can do this with a few easy steps.

1）将相对定位添加到父容器中：

1) Add relative positioning to the parent containers:

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

2）将子元素设置为绝对定位。

2) Set the child elements to absolute positioning.

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

3）将元素设置为顶部和底部位置。

3) Set the elements to top and bottom positions.

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

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

4）将所有父容器的高度设置为100％

4) Set the height of all parent containers to 100%

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

5）在容器上设置最小高度，不会重叠。

5) Set a min-height on the container so the top and bottom children won't overlap.

#container {
    min-height: 349px;
}

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

这篇关于位置div在包含div的顶部和底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！