相对父级中的绝对定位元素。需要 parent 增长到里面元素的宽度

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

不幸的是，绝对定位的元素不再与它们的父元素交互，所以要获得你想要的效果，你需要一个 hack。幸运的是，网络开发充满了黑客：

仅 CSS，使用 prop 元素

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

不利的一面是，这会复制任何没有 CSS（和搜索引擎）的人都会看到的内容。

jQuery 获取孩子的绝对宽度

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

in action here 都可以看到。