Question

我在容器中有四个div元素：

<div id="container">
    <div id="top"></div>
    <div id="bottom-left"></div>
    <div id="bottom-center"></div>
    <div id="fill"></div>
</div>

我需要按如下方式定位：

top元素的上边缘应位于容器的上边缘。 bottom-left元素应位于容器的左下角。 bottom-center元素应位于容器底部的中心。 fill元素将具有固定宽度，并应垂直占用剩余空间。

问题是fill元素将包含任意文本，并且可以是任意高度。我需要将其放在top元素下并将bottom-center置于其下。 bottom-left的下边缘必须与bottom-center的底部对齐。

我尝试过绝对定位，但它对任意文本长度都不起作用。

我将不胜感激。

编辑：这是jsfiddle代码：http://jsfiddle.net/gCg29/ 它创建了我想要实现的布局，但是有一个表格。

如何摆脱表并具有相同的功能？请注意，如果浏览器窗口的宽度不足，则元素不会重叠。另请注意，如果文本长度增长，则左下角和下方文本元素会粘在文本的底部。

                           +-----------------------+
                           |  top (fixed size)     |
                           +-----------------------+
                    +-----------------------------------+
                    |                                   |
                    |                   fill            |
                    |        (arbitrary height,         |
+-----------------+ |         fixed width)              |
|                 | |                                   |
|  bottom-left    | |                                   |
|  (fixed size)   | |                                   |
|                 | |                                   |
|                 | |                                   |
|                 | |                                   |
|                 | |                                   |
|                 | +-----------------------------------+
|                 |      +--------------------------+
|                 |      |bottom-center (fixed size)|
+-----------------+      +--------------------------+

Answer 1

这是很多css，但我认为这就是你想要的。这里发生了很多事情：

将#container设置为position: relative，这样您就可以绝对定位＃bottom-left和＃bottom-center
给#top和#fill margin: 0 auto以便他们以页面为中心
＃bottom-center也会将left: 50%带到中心位置。然后margin-left: -width使其完全居中
#container获取padding-bottom: 75px，以便#fill不与底部div重叠

http://jsfiddle.net/34Jpx/2/

div { 
    border: 1px dotted lightgray; 
}
div#container { 
    text-align: center; 
    width: 100%;  
    position: relative;
    padding-bottom: 75px; 
}
div#top { 
    height: 50px; 
    width: 400px; 
    margin: 0 auto; 
    background: lightgreen;  
}
div#fill { 
    height: 200px; 
    width: 500px; 
    margin: 0 auto;  
    background: lightblue; 
    border: 2px solid red; 
}
div#bottom-left {
    position: absolute;
    bottom: 0;
    height: 200px;
    width: 150px;
    background: gray;
    z-index: 99;
}
div#bottom-center {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -200px;
    width: 400px;
    height: 50px;
    background: lightyellow;
    z-index: 100;
}

Answer 2

我对你有一个可怕的想法。基本上你要求翻页重力。因此：

jQuery('body').css('transform', 'rotate(180deg)');
jQuery(everythingelse).css('-webkit-transform', 'rotate(180deg)');

这会翻转页面，然后重新填充所有元素，使它们在正反转时显示正面，但在反转后处于相同的位置。

当然，你需要支持的不仅仅是css3浏览器，而且我确信这是非常昂贵的，但我认为这将是一个有趣的，如果不是完全有用的答案。：）

Answer 3

你走了：

#container {
    position: relative;
    overflow: hidden;
}

#fill {
    margin: 0 auto 50px; /* 50px = height of bottom-center */
    width: 300px;
}

#top, #bottom-center {
    height: 50px;
    width: 200px;
    margin: 0 auto;
}

#bottom-center {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -100px; /* - width / 2 */
}

#bottom-left {
    position: absolute;
    left: 0;
    bottom: 0;
}

http://jsfiddle.net/nXqQr/1/

容器上的重要部分是overflow: hidden;，它会使#fill上的边距扩大，以便#bottom-center适合。

Answer 4

创建一个不可见的div（让我们称之为inv-div-1），它只包含左下角和另一个（inv-div-2），其中包含所有其余的，给它们两个浮点数：左;定位。在html文件中，inv-div-1必须位于inv-div-2之前。

如何使用CSS堆叠元素

4 个答案: