1

我正在尝试实现一种布局，其中一系列 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;
}

​</p>

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

非ie7结果 ie7 结果

我在http://jsfiddle.net/acdara/MEDSy/27/有一个 jsFiddle

我知道另一种解决方案也是浮动左对齐元素，但我真的很想保留内联块的好处，比如不必担心元素脱离流程。

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

4

2 回答 2

2

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

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

它不适用于 IE7 的原因是 inline-block 不适用于 IE7 默认情况下不内联的项目（请参阅浏览器兼容性图表 inline-block），因此您的浮动将表现出浮动的正常行为对于块项目 - 即如果项目首先向左浮动，则右侧浮动项目将落在它们下方，就像顺序块项目没有浮动一样。

于 2012-04-04T23:46:07.753 回答
0

我得到了它的所有工作

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

于 2012-04-04T21:56:01.427 回答