Div 对齐 FireFox, IE7, IE6答案

【问题标题】：Div Alignment FireFox, IE7, IE6Div 对齐 FireFox, IE7, IE6
【发布时间】：2012-06-28 02:05:59
【问题描述】：

我在对齐 IE6、IE7、IE8 和 Firfox 3 中的几个 div 时遇到问题。它们都不能正确地呈现 IE8 和 Firefox，而其他 IE8 和 Firefox 则不能。

是否可以通过浮动和清除来做到这一点。它们之间不需要有任何间距，我就是这样画的。另外，div 的宽度应该是固定的。

alt text http://cowfarm.net/divAlign.png

【问题讨论】：

一些代码将有助于查看究竟是什么问题。
这很容易做到，您希望 div 在 HTML 源代码中出现的顺序是什么？你能给他们编号吗？

标签： css html css-float

【解决方案1】：

是的，这是可能的：

<table>
    <tr>
        <td></td>
        <td rowspan='2'></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td colspan='2'></td>
    </tr>
</table>

当然，我只是在开玩笑。

【讨论】：

+1 因为那确实有效；它无处不在。患有“桌面恐惧症”的人需要克服它。

【解决方案2】：

2 个左侧 DIV 和右侧 DIV 的组合高度不会相等。除非你指定这些，或者如果内容产生相同的高度......但我认为这应该不是问题？

更新

<style type="text/css">
    #container {float:right;position:relative;}
    #left    {float:left;}
    #left_1  {float:left;}
    #left_2  {clear:left;float:left;}
    #right   {float:right;}
    #bottom  {float:left;clear:both;}
</style>

<div id="container">
    <div id="left">
        <div id="left_1">left 1</div>
        <div id="left_2">left 2</div>
    </div>

    <div id="right">right</div>

    <div id="bottom">bottom</div>
</div>

【讨论】：

在 Firefox 中使用固定宽度会导致 #right 位于 left2 下方，即这会导致 #right 一直浮动到页面右侧...
会不会是固定宽度的容器太小而无法同时容纳左右 DIV？
不需要浮动#right，给它一个大于等于左边div宽度的左边距即可
我没有尝试过，但它甚至可以在没有容器 div 的情况下工作，虽然就像我说的那样，我会给右边的 div 一个左边距而不是浮动它。
是的，这就是问题所在:)，如果没有容器 div 右侧一直浮动到页面的右侧，这可以解决吗？通过添加另一个与left1、left2和bottom一样长的div？