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/

位于包含div的顶部和底部的div

1 个答案: