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

Question

我有一个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>

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

Answer 1

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

仅限CSS，使用道具元素

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

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

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

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

您可以看到它们in action here。