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 的数量取决于一个数组中传递的 s 的数量。问题是，我想给 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*inner div 宽度 + 50 像素，因此 2 s 可以在同一行中组合在一起。

4

2 回答 2

1

不确定究竟什么在 IE 中不起作用，我不知道你是否有一个定义宽度的包装器，它正好适合那些。但是 IE 6 中有一个著名的错误 .. 也许 7 我也不确定。如果您在同一方向上浮动左和边距，例如左浮动，并且在 IE 6 中左边距为 xx 个像素，它将使边距加倍。因此，如果您确实定义了这些框应该适合的间距，那么在 IE 中它很可能会换行到下一行，使其看起来不像浮动

添加

display: inline;

到每个拆分类的 css

于 2012-05-11T18:56:25.967 回答
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 回答