Question

我正在尝试实现一个布局，其中一系列div在一行中呈现，其中一些左对齐，其中一些右对齐。

<html>
    <body>
        <div width="100%">
            <div class="left">item1</div>
            <div class="left">item2</div>
            <div class="right">item3</div>
            <div class="right">item4</div>
        </div>
    </body>
</html>
.left, .right
{
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.right
{
    float: right;
}

我有上面的代码，它呈现我期望的方式ie8，firefox，chrome。但是在ie7上，右浮动的div显示在下一行而不是相同的行

non-ie7 result

我在http://jsfiddle.net/acdara/MEDSy/27/

有一个jsFiddle

我知道另一个解决方案是浮动左对齐的元素，但我真的想保留内联块的好处，就像不必担心流程中的元素一样。

我想知道我能为ie7做些什么来保持内联块的优点。

Answer 1

一种解决方案是翻转标记的顺序，以便首先浮动正确的元素：

<div class="right">item3</div>
<div class="right">item4</div>
<div class="left">item1</div>
<div class="left">item2</div>

它不能用于IE7的原因是因为内联块在IE7上不适用于默认情况下不内联的项目（请参阅browser compatibility chart for inline-block），因此您的浮动将显示正常行为为物品浮动 - 即如果物品首先浮动，则右浮动物品将落在它们下面，就像块顺序物品没有浮子一样。

Answer 2

我用它来完成所有工作

<html>
    <head>
        <style>

.right
{
    float: right;
}
.left
{
    float: left;
}

        </style>
    </head>
    <body>
        <div width="100%">
            <div class="left">item1</div>
            <div class="left">item2</div>
            <div class="right">item3</div>
            <div class="right">item4</div>
        </div>
    </body>
</html>

检查：http://jsfiddle.net/Zgz9G/2/

右对齐ie7中的内联块元素

2 个答案: