代码之家 › 专栏 › 技术社区 › Dycey

div-IE 7中的浮动列表

css-float internet-explorer-7 css

Dycey · 技术社区 · 14 年前

我有一些页面元素是要出现在一个两列列表。

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

那么,长话短说: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 -->

... 我认为它处理得很整齐。使一个较长的单个项目与多个较短的单个项目相邻成为可能。

2 回复 | 直到 12 年前

meder omuraliev 14 年前

你的 lis clearing 和 width 在lis上,而不是里面的DIV:

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

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

KensoDev 14 年前

IE需要你定义一切,否则它会为你定义一切(你不会喜欢结果)

如果你想让一个li浮动在另一个li旁边,你需要定义宽度,不管是用硬代码CSS还是jQuery,通过测量内部内容并根据它设置父级的宽度。