Question

我有一列文字，两边都有很宽的边距。在它下面，我有一个全宽的数据部分（以表格格式）。

我可以很容易地将它们相互对齐。我的问题是桌面上有一个“标签”。它足够窄，不会干扰文本的中心列，并且布局要求它向上滑动到文本左侧的空白区域。

简单的解决方案是一个位置：绝对，顶部：foopx相对于div的其余部分向上滑动。唯一的问题是，标签的高度是动态的。我需要以某种方式顶部：'height'px，但（显然）CSS不包含任何动态值。

我需要做的是将'tab'的下边缘与包含div的 top 边缘对齐，我不能在我的生活中找出任何CSS语句。我宁愿避免使用基于javascript的方法（例如，在运行时获取选项卡的高度，然后将顶部设置为等于该高度），因为使用AJAX调用不时刷新整个底部div，并调整其中的高度进程导致页面在更新时“抖动”（不确定为什么没有高度更新就不会发生;抖动位于代码的单独部分）。

请求的代码示例：

<html>
<head>
<style>
#smallColumn
{
    float:left;
    width:100px;
    height:100px;
    background:#000;
    margin:5px;
}
#fullColumn
{
    float:left;
    width:200px;
    height:300px;
    background:#000;
    margin:5px;
}   
#bottomDiv
{
    position:relative;
}
#tab
{
    position:absolute;
    top:-40px;
}
</style>
</head>

<body>
<div id="smallColumn">a</div>
<div id="fullColumn">b</div>
<div style="clear:both"></div>
<div id="bottomDiv">
    <div id="tab">Tab</div>
<hr />
DATA DATA DATA
</div>
</body>
</html>

Answer 1

使用顶部边距，相应的display属性和vertical-align:bottom。请参阅下面的代码+注释以获得解释。您必须设置height和负margin-top值，该值大于标签内容的实际高度。否则，内容可能会跳回到顶部。

相关的HTML / CSS：

<div id="cont">
    <div id="tab">
        <div id="tab-fix">
            Tab
        </div>
    </div>
    Rest of content
</div>

#cont {
    margin-top: 30px; /*Reserve space*/
    height: 100px;
    background: lightgreen;
}
#tab {
    display: table; /* Necessary for the application */
    margin-top: -30px;/* Move tab to the top*/
}
#tab-fix {
    height: 30px; /* Expecting the height to not exceed 30px*/
    display: table-cell;
    vertical-align: bottom; /* Aligns the content at the bottom*/
}

小提琴：http://jsfiddle.net/stEW3/2/

Answer 2

<强> UPDATE2

所以这是一个难以解决的问题！我唯一能想到的是在标签周围放一个包装。该包装需要相对定位并且高度等于标签的高度。然后你可以使用100％的绝对和负值。

http://jsfiddle.net/mrtsherman/BC8Xr/2/

<强>更新

发布的代码我现在明白了。如何使用绝对值并指定底值0？

http://jsfiddle.net/mrtsherman/BC8Xr/

<div id="content">
    <div id="smallColumn">a</div>
    <div id="fullColumn">b</div>
    <div style="clear:both"></div>
    <div id="bottomDiv">
        <div id="tab">Something</div>
        <hr />
    </div>
</div>

#content { border: 1px solid red; position: relative; } 
#bottomDiv
{
    position:absolute;
    bottom: 0px;
}
#tab
{
    /*
    position:absolute;
    top:-40px;
    */
}

<强>旧

如果没有html结构和一些模糊的描述，这有点难以破译。但这就是我的意思：

http://jsfiddle.net/mrtsherman/VM99L/

基本上，您希望将表格数据上方的选项卡绘制到之前的div中。您可以使用负上边距。只需将其设置为与标签高度相同的高度即可。如果你在div上有填充，那么你也需要补偿它。

<div id="tabulardata">
    <div id="tab">Tab X</div>
    <table>
        <tr><td>data</td></tr>
        <tr><td>data</td></tr>
        <tr><td>data</td></tr>
        <tr><td>data</td></tr>
        <tr><td>data</td></tr>        
    </table>
</div>

#tabulardata { margin-top: -50px; }
#tab { height: 50px; width: 80px; background: gray; color: white;  }

使用position：absolute时，如何定义我希望一个元素的下边缘与另一个元素的上边缘对齐？

2 个答案: