ie7のインラインブロック要素を右揃え

divのシーケンスが1行でレンダリングされ、そのうちのいくつかが左揃えになり、一部が右揃えになるようなレイアウトを実現しようとしています。ie7のインラインブロック要素を右揃え

<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の、クロムに期待する方法をレンダリングします。しかし、IE7上で右浮かべたdivが

non-ie7 result

代わりに、同じ行の次の行に示されている私はhttp://jsfiddle.net/acdara/MEDSy/27/

でjsFiddleを持って、私は他のソリューションは、左整列要素をfloatにある知っていますしかし、私は本当にインラインブロックのメリットを、フローから要素を気にする必要がないように保ちたいと思っています。

インラインブロックの良さを維持するために私ができることが他にもありますか？

出典

2012-04-04 Schu

あなたのページにDOCTYPEを入れてみてください。 –

あなたのマークアップの中で最初に右揃えにしたいコンテンツを置くのはどうですか？次に、浮かれた要素は、あなたが望むように整列する必要があります。 – kinakuta

nope、DOCTYPE does not help、私はすでに私の実際のアプリでそれを持っていた、今もフィドルを更新しました。 – Schu

一つの解決策は、あなたが最初に右の要素を浮動しているので、あなたのマークアップの順序を反転することである。

<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を参照）で動作しないためです。ブロックアイテムの浮動小数点の通常の動作を示します。つまり、アイテムが最初に浮動小数点化された場合、浮動小数点のアイテムは浮動小数点のないブロックアイテムと同じ方法で浮動小数点以下になります。

出典

2012-04-04 23:46:07 kinakuta

私はそれをチェックし、この

<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-04 21:56:01 johnnE

私は既にこれを既知の解決策と言いましたが、実際のアプリケーションでは、左揃えの要素を浮動させるのではなく、 – Schu

ie7のインラインブロック要素を右揃え

答えて

関連する問題