相对父级内的绝对定位元素。需要父级增长到内部元素的宽度

时间:2010-09-03 14:42:30

标签: html css

我有一个div,我想浮动其他div。在浮动div中,我需要将内容定位在底部,因为其中一些内容比其他内容更高,我不希望它们对齐最佳。我尝试过这样的事情:

.right {
  float:right;
}
.left {
  float:left;
}
.actionCell {
  margin:2px 5px 2px 5px;
  border:1px solid Black;
  height:100%;
  position:relative;
}

HTML:

<div style="position:relative;">
    <div id="HeaderText" class="left actionCell"><span style="position:absolute;bottom:0px">Header&nbsp;Text</span></div>
    <div id="SelectedItems" class="left actionCell">10 Selected Items</div>
</div>

内部有跨度的那个工作,但是我需要它的父容器增长到它的宽度。有没有想法如何在不使用表的情况下解决这个问题?

1 个答案:

答案 0 :(得分:1)

不幸的是,绝对定位的元素不再与其父元素交互,所以为了获得你想要的效果,你需要一个黑客。幸运的是,网络开发充斥着黑客攻击:

仅限CSS,使用道具元素

visibility: hidden内创建一个<div id="HeaderText">元素,其内容与绝对定位的<span>相同。这会强制<div id="HeaderText">的宽度包含您的绝对<span>

在不利方面,这复制了没有CSS(和搜索引擎)的人会看到的内容。

jQuery获得绝对孩子的宽度<​​/ strong>

将宽度<div id="HeaderText">设置为其绝对<span>子项的宽度。这可以解决重复的内容,但您的用户需要使用Javascript。

您可以看到它们in action here