防止绝对定位的盒子离开其父母容器？

Question

我的设置类似于下面的代码，其中可以有任意数量的项目。

<div class="align-center" style="box-shadow: none; margin: 20px 0 0 20px; position: relative">
    ...
    ...
    ...
    ...
    ...
    <label class="photobox box-shadow clear-inner radius" style="display: inline-block; margin: 20px 20px 0 0" for="col_75291999308">
        <img class="radius-left cursor-pointer" height="128" width="128" alt="[thumb]" src="images/collection/thumb/penguins-madagascar-dr-blowhole.jpg" />
        <span class="large bold text-shadow black-text" style="line-height: 128px; padding: 0 5px">‣</span>
    </label>
    <input id="col_75291999308" class="switch single" type="radio" name="description" />
    <div class="box box-shadow" style="border: 5px solid #379; border-radius: 10px; left: 50%; margin: -74px 0 0 -266px; position: absolute; width: 512px; z-index: 999">Information</div>
    ...
    ...
</div>

如果你很好奇，我会为照片盒提供CSS。所有其他类都是不言自明的（除了框，它只应用背景和边界半径）。

input.switch { display: none }
input.switch.single + div { display: none }
input.switch.single:checked + div { display: block }

.photobox { background: #DDD; display: block; height: 128px; overflow: hidden }
.photobox:hover { background: #D5D5D5 }
.photobox > img { background: #CCC url('images/smooth/loading.png') repeat; border-right: 1px solid #BCC3C7; float: left; height: 128px; width: 128px }
.photobox > div, .position > span { cursor: pointer; height: 108px; margin-left: 129px; padding: 10px; position: relative }
.photobox > span { margin-left: 0 }
.photobox > div > .floater { color: #EEE; display: block; line-height: 14px; opacity: 0; position: absolute; top: 5px; left: -123px; text-shadow: -1px 0 #333, 0 1px #333, 1px 0 #333, 0 -1px #333 }
.photobox:hover > div > .floater { opacity: 1.0; transition: opacity .5s linear }

这不是整个代码，但基本上每个分区对应一个标签和输入单选框。默认情况下，分区是隐藏的，标签会激活与其对应的单选框，然后立即取消隐藏分区（单选框始终隐藏）。

这个想法是绝对定位的元素将在父容器中水平居中，然后保持在正常显示的相同 y 位置（通过不指定顶部或底部）。但是，最后一行中的项目将导致此“弹出”框流过父容器的底部。

如何防止任何和所有这些盒子延伸到容器底部？基本上，如果有足够的空间，请保持它所处的位置。如果没有足够的空间，它应该将盒子推到容器的底部。这是否可以使用仅CSS ？

请记住，此示例恰好使用了四列，但列数完全取决于客户端屏幕的大小。请不要建议服务器端检查以“确定”该项目是否在最后一行。另外，只是为了强调，没有JavaScript 。

Answer 1

很难理解你想要什么，但也许这会对你有帮助..

设置一个固定高度和自动宽度的包装div，并将overflow设置为隐藏？

Answer 2

绝对定位的好处在于你现在可以使用其他4个命令了。 top，bottom，left和right。 top将推送元素。 bottom会推动元素上升。 left将元素推向右侧，当然right将元素推向左侧。因此，如果我正确理解您的问题，您需要做的就是使用bottom命令，如下所示：bottom:200px;。这应该将子元素放回父元素中。这有帮助吗？

Answer 3

纯CSS似乎无法实现这一点。我尝试了所有我能做到的事情，但我能得到的最接近的解决方案是使用:nth-last-of-type(-n+6)来推高网格中最后6个项目的分区。该解决方案的唯一问题是当用户调整窗口大小（更小或更大）时，最后一行中并不总是正好有6个元素。

我最近重新修改了我的网站，现在使用了一个明确的宽度，其中始终是最后一行中的6个项目，因此在这种情况下:nth-last-of-type(-n+6)选择器适用于我

我唯一能想到的是CSS是否实现了类似于现有:last-line选择器的:first-line选择器，这将允许您选择最后一行，然后选择该行内的每个分区... 也许？我不知道那个选择器是否可行。

除了为父母使用固定宽度之外，评论中的想法是下一个最佳方式。只要他们的内容足够低于父母（可能是一些额外的行），那么超越父母边界的扩展并不是一件大事，只能单独留下。