0

我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)|
+-----------------+      +--------------------------+
4

4 回答 4

1

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

  1. 将#container 设置为，position: relative以便您可以绝对定位#bottom-left 和#bottom-center
  2. 给 #top 和 #fillmargin: 0 auto以便它们在页面上居中
  3. #bottom-center 也可以left: 50%带到中心。然后margin-left: -width让它完全居中
  4. #containerpadding-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;
}​
于 2012-11-03T05:43:21.580 回答
1

我有一个可怕的想法给你。本质上，您要求反转页面重力。因此：

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

这将翻转页面，然后将所有元素重新翻转到位，以便它们显示正面朝上但在反转后的相同位置。

当然，您不仅要支持 css3 浏览器，而且我敢肯定这非常昂贵，但我认为这将是一个有趣的答案，如果不是完全有用的话。:)

于 2012-11-03T05:54:57.137 回答
1

干得好：

#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适合。

于 2012-11-03T09:04:36.940 回答
0

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

于 2012-11-03T05:30:47.887 回答