Css 防止绝对定位的长方体离开其父容器？

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

<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>

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

---

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

如何防止任何和所有这些箱子伸出容器底部？基本上，如果有足够的空间，保持在它所在的位置。如果没有足够的空间，它应该把箱子推到容器底部。只有CSS才能做到这一点吗

---

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

很难理解您想要什么，但这可能会对您有所帮助

---

将环绕div设置为固定高度和自动宽度，并将overflow设置为hidden？

绝对定位的好处在于，您现在可以使用4个其他命令<代码>顶部，

底部

，

左侧

和

右侧

<代码>顶部将向下推动元件<代码>底部将向上推动元件

left

会将元素向右推，当然

right

会将元素向左推。因此，如果我正确理解了您的问题，您所需要做的就是像这样使用

bottom

命令：

bottom:200px。这应该将子元素放回父元素中。这有帮助吗？
纯CSS似乎不可能做到这一点。我尝试了我能想到的一切，但我能得到的最接近的解决方案是使用
：nth last of type（-n+6）
将网格中最后6项的除法推高。该解决方案的唯一问题是，当用户调整窗口大小（或小或大）时，最后一行中并不总是正好有6个元素

我最近重新发布了我的站点，现在它使用了一个确定的宽度，在最后一行中总是有6个项目，所以在这种情况下，
：nth-last类型（-n+6）
选择器对我有效

我能想到的唯一一件事是，如果CSS实现了一个类似于现有的
：first-line
选择器的
：last-line
选择器，它将允许您选择最后一行，然后选择该行中的每个分区。。。大概我不知道用那个选择器是否可能

除了为家长使用固定宽度外，来自评论的想法是下一个最好的方法。只要它们在父容器下方有足够的内容（可能有几行额外的内容），超出父容器边界的扩展就不是什么大问题，可以单独进行。
“但是，最后一行中的项目将导致此“弹出”框从父容器底部流过。”-我认为您需要发布更多代码。我不明白你的最后一行是如何导致弹出框改变位置的。@mrtsherman:不是。如果查看图像，您将看到弹出框始终显示在展开它的项目的基线处。问题在最后一行，这导致它超出父容器。我明白你的意思。需要查看HTML/CSS才能给出具体答案，因为没有“通用”解决方案。@Madmartigan:我添加了一些更详细的代码。如果你出于某种原因需要一个真实的例子，你可以查看它。@animuson:GL，我明天必须检查一下，是时候崩溃了。在现场演示的第一眼，我会说，别管它，它很好：/事实上，我更喜欢它的方式，因为它是一致的，但我并不想否定你的问题。问题是，这将迫使所有弹出框相对于底部处于相同的位置，即使是那些不需要重新调整的弹出框。我们的想法是只向上推那些超出父容器底部的框，如示例图像右侧所示。如果您只想使用css调整某些框，我只知道两种方法。首先，如果需要调整的弹出窗口足够相似，您可以为它们提供相同的css
类
，然后添加
底部
或
边距等；否则，您可以设置一个css
id`，并分别针对每个问题弹出窗口。问题是，我不知道每行将显示多少项。根据用户的浏览器大小，它可能在3到7之间。除非你能玩边距底部技巧，否则你可能需要css之外的东西。。。如果你在东部时间9:05到12:30之间在线，我们可以把这个带到聊天室，你可以通过我自己给我发送一个链接…这只会隐藏弹出框的其余部分，只显示不在父项之外的顶部位。
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 }