0

次の div 構造を動的に作成します。

<div id=Box>
   <div id=outer>
       <div id="inner1" class="split_right">
          some 
       </div>
       <div id="inner2" class="split_left">
          some 
       </div>
          .....
          .....
       <div id="inner(n)" class="split_right">
          some 
       </div>
       <div id="inner(n+1)" class="split_left">
          some 
       </div>

   </div>
</div>

div の数は、1 つの配列で渡される の数に依存します。問題は、次のように split_right と split_left に css ルールを与えたいということです:

.split_left {
float: left;
margin: 0px 10px 5px 10px;
}
.split_right {
float: right;
margin: 0px 10px 5px 10px;
}

これは chrome と safari では問題なく動作しますが、IE6+ では動作しません。

私は何を間違っていますか??

アップデート

これは私がやろうとしていることです:

http://postimage.org/image/g2t4qsq4v/

外側の div の幅は 2*内側の div 幅 + 50 ピクセルに等しい固定幅であるため、2 つの が同じ行に収まります。

4

2 に答える 2

1

これで試してみてください：

<div id=Box>
   <div id=outer>
       <div id=inner1 class="split_right">
          some image
       </div>
       <div id=inner2 class="split_left">
          some image
       </div>
          .....
          .....
       <div id=inner(n) class="split_right">
          some image
       </div>
       <div id=inner(n+1) class="split_left">
          some image
       </div>

   </div>
</div>

あなたは引用符を忘れました

于 2012-05-11T18:47:47.180 に答える
1

IEで何が機能していないのか正確にはわかりません。また、それらに完全に適合する幅が定義されたラッパーがあるかどうかもわかりません。しかし、IE 6 には有名なバグがあります。多分 7 にもあると思います。IE 6 で float left と margin left xx ピクセル数など、同じ方向に float left と margin がある場合、マージンは 2 倍になります。したがって、これらのボックスが収まるはずの間隔を定義している場合、IE では、次の行に折り返されて、フローティングしていないように見える可能性が高くなります。

追加

display: inline;

各分割クラスの css に

于 2012-05-11T18:56:25.967 に答える