3 div 独立相对和顶部对齐答案

【问题标题】：3 div independently relative and top aligned3 div 独立相对和顶部对齐
【发布时间】：2010-06-14 05:05:36
【问题描述】：

如何（顶部）对齐应该相对于前一个 div（但不在它们之间）的 3 个 div？
我不能使用浮点数或position:inline-block（如果您在 2 个 div 上设置 display:none，最后一个不应移动）。
position:absolute 也不能使用，因为下面有一个相对页脚。
vertical-align:top 没有不能使用跨度 - 任何解决方法？

我尝试使用包装器，但它无法工作，因为 div 的高度不固定。
包装器的高度无论如何都会被完全忽略（通过以下页脚），除非我使用相对子级。

有什么想法吗？

【问题讨论】：

@meder 想象 3 行：第一行一个 div（100% 宽度）-（下方）第二行 3 个 div 在（第一行）div 的底部对齐-第三行（页脚 100% width) // 我的问题的难点在于，如果其他人被删除，第二行的 div 不应该移动，而且页脚是相对的（不覆盖第二行的 div）
@brock 已在问题中解释：当您在具有 inline-block 或浮动的其中一个 div 上设置 display:none 时，其他 div 将移动（第一个 div 除外）。

标签： css cross-browser alignment

【解决方案1】：

HTML
顺序很重要，包装器是可选的（用于定位侧 div）

<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
<div id="footer"></div>

CSS

#left {float:left}
#middle {margin:0 auto}
#right {float:right}
#footer {clear:both}

除非有人想出更简单的方法 24 小时不接受我的回答

【讨论】：