2

上下文：

我正在为我的角色扮演星际迷航舰队（书呆子，是的，我知道）构建一个与 jQuery 或 PhP 一起使用的 div 名册。我需要我的 div 以某种方式运行，以使其足够健壮以从 XML 中提取并自动生成名册并自动调整我的 div 大小以适应添加的许多名称。

使用 Firebug 等查看我当前的构建示例将有助于了解我在做什么。

要求：

每个小节（前哨人员、前哨防御）都需要有多个 div：

1) 背景图片和小节容器（本例中的 div id= outpostPersonnel）

2) 列表左右两边的子分区容器。（想想报纸的段落。）

3) 在需求 1 中填充/对齐该背景图像所需的前 n 个名册名称。（div id= initialCommandTags（左侧列表）和 initialPersonnelTags（右侧列表））

4) 具有 n 个附加名册名称的 Div。(div id = overflowCommandTags, overflowPersonnelTags, )

5) 让 LCARS 看起来像 LCARS 的彩色 div 条纹仍在封装要求 4 中的 n 个名册名称。（div id = colorStretchLeft）

问题：

我无法让父小节 - 来自 1（outpostPersonnel）的 div 完全遵守其所有子 div 的高度 - 一直到 overflowCommandTags/overflowPersonnelTags div 的高度。

我尝试过的一种方法是，下一个小节（前哨防御）与overflowCommandTags div 重叠。另一个——这是我现在的例子（以及我放弃的地方）的方式——在overflowTags div的末尾和下一个小节（outpostDefense）的顶部之间放置了一个~160像素高的空白空间。

如果你触发我当前的构建示例，你会看到父 div (outpostPersonnel) 向下延伸，即使它的子 div 都没有那么高。

据我所知，Overflow:auto 和 Overflow:hidden 不是可行的解决方案，因为我需要 div 完全展开并且没有滚动条。

我完全被难住了。看它也是一个非常简单的解决方案。这是否与父 div 只是一个 BG 而子 div 具有实际内容的事实有关？

谢谢你陪我走到这一步！干杯!

（（另外我的 div 样式的东西是内联的原因是因为我将它嵌入到 Enjin 页面上并且我不能调用 *.css 文件。））

4

1 回答 1

2

这里有几件事要提到，但我将从两个部分之间存在差距的原因开始。

从我从您使用的内联样式中可以看出，您使用了position: relative不同top的left值来实现所需的布局。personnelContainer在您已添加ID 的元素上top: -230px。这就是造成差距的原因。

当您相对定位一个元素时，您必须想象该元素处于其原始位置并且您只是在视觉上移动了它。换句话说，移动元素不会改变页面的流向，因此在您的示例中应用负顶部值不会改变容器的高度。（很好的参考：http ://reference.sitepoint.com/css/relativepositioning ）

考虑到这一点，您可以对后面的top每个部分应用负值以缩小差距，但是您可能会发现这会使问题进一步复杂化并导致内容重叠。

我能给出的最好建议是阅读以下关于浮动布局的文章：
http://css-tricks.com/all-about-floats/
http://www.quirksmode.org/css/clearing.html

相对定位有它的应用程序，但在这种情况下，您应该使用该float属性来实现您的布局。如果您阅读上面的文章，它将为您提供浮动布局的良好基础，以及如何确保您的部分正确包含所有内容。只要您没有在任何子元素上设置任何固定高度，您就会发现它们会扩展以容纳任意数量的内容。

于 2013-01-22T22:13:38.067 回答