Question

我有一些页面元素可以出现在两列列表中。

  <ul id="modules" class="module_container"><!-- begin modules -->
    <li>
      <div class="single left" id="component_194"><!-- begin component -->
        <p>Excepteur sint occaecat cupidatat...</p>
      </div><!-- end component -->
    </li>
    <li>
      <div class="single right" id="component_195"><!-- begin component -->
        <p>Ut enim ad minim veniam...</p>
      </div><!-- end component -->
    </li>
    <li>
      <div class="double" id="component_111"><!-- begin component -->
        <p>Lorem ipsum dolor sit amet...</p>
      </div><!-- end component -->
    </li>
  </ul><!-- end of modules -->

我正在使用jQuery来允许用户对页面上的框顺序进行排序。有些框是两列宽，有些是单列（因此是类）。

CSS在Firefox中运行得非常好......

  <style type="text/css" media="screen">
  #modules {
    width: 584px;
  }

  #modules li {
    list-style: none;
    float: left;
    overflow: hidden;
  }

  #modules li div {
    border: 1px solid #999;
    margin: 10px;
    padding: 10px;
    height: 120px;
    overflow: auto;
    width: 542px;
    clear: both;
  }

  #modules li div.single {
    width: 250px;
    clear: none;
  }

  #modules li.placeHolder div {
    border: 1px dotted #999;
    width: 250px;
  }
  </style>

...但是如果我在IE 7中有一个单独的框后跟一个双框，那么双框就不会换行到下一行。我有一个使用＆lt; li＆gt;的旧版本将两个单个项目包装成一个＆lt; li＆gt;，将两个项目包装成＆lt; li＆gt;的元素自己和（通过PHP）必要的单个项目到＆lt; li＆gt;在两个双框之间......但是通过jQuery挂钩和取消挂钩，允许用户在页面上拖放项目。

所以，长话短说：是否有一个修复IE7让它像FireFox一样？

亲切的问候，失落的原因部门。

更新

感谢愚蠢地浮动lis，然后担心divs向我指出，我想出了以下内容：

  #modules {
    width: 600px;
    border: 1px solid #999;
    overflow: hidden;
    padding: 0;
  }

  #modules li {
    list-style: none;
    overflow: hidden;
  }

  #modules li div {
    border: 1px solid #999;
    margin: 10px 0 0 10px;
    padding: 10px;
  }

  #modules li.placeHolder div {
    border: 1px dotted #999;
    width: 290px;
  }

  #modules li.double { 
    width:580px; clear:both;
  }

  #modules li.single { 
    width:290px; float: left;
  }

......和......

<ul id="modules" class="module_container"><!-- begin modules -->
  <li class="single">
    <div id="component_194"><!-- begin component -->
      <p>Excepteur sint occaecat cupidatat...</p>
    </div><!-- end component -->
  </li>
  <li class="single" >
    <div id="component_195"><!-- begin component -->
      <p>Ut enim ad minim veniam...</p>
    </div><!-- end component -->
  </li>
  <li class="double" >
    <div id="component_111"><!-- begin component -->
      <p>Lorem ipsum dolor sit amet...</p>
    </div><!-- end component -->
  </li>
  <li class="single" >
    <div id="component_195"><!-- begin component -->
      <p>Ut enim ad minim veniam...</p>
    </div><!-- end component -->
  </li>
  <li class="double" >
    <div id="component_111"><!-- begin component -->
      <p>Lorem ipsum dolor sit amet...</p>
    </div><!-- end component -->
  </li>
</ul><!-- end of modules -->

......真正处理它（我认为）。可以在多个较短的单个项目旁边放置1个长单个项目。

Answer 1

您的lis正在浮动。尝试在lis上指定clearing和width，而不是内部的div：

li.double { clear:both; width:500px; }
li.single { width:249px; }

<li class="double"></div>

Answer 2

IE需要您定义所有内容或者它将为您定义（并且您不会喜欢结果）

如果你想让1 li浮动到另一个旁边，你需要通过测量内部内容并根据它来设置父内容的宽度，在硬编码CSS或jQuery中定义宽度。

在div中浮动列表 - IE 7

2 个答案: