position divs at top and bottom of containing div

问题

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?

Ex:

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

回答1:

You can do this with a few easy steps.

1) Add relative positioning to the parent containers:

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

2) Set the child elements to absolute positioning.

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

3) Set the elements to top and bottom positions.

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

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

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

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

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

#container {
    min-height: 349px;
}

See a working example: http://jsfiddle.net/FaTxw/3/

来源：https://stackoverflow.com/questions/15978495/position-divs-at-top-and-bottom-of-containing-div

标签

html

css

position

css-float