Question

我通常会创建以下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 *内部div宽度+ 50像素，因此2 s在同一行中组合在一起。

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

您忘记了引号

Answer 2

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

添加

display: inline;

到每个拆分类的css

CSS - 类选择器在IExplorer中不起作用

2 个答案: