Плавающие списки в div - IE 7 - PullRequest
Новая
       5

Плавающие списки в div - IE 7

0 голосов
/ 30 июня 2010

У меня есть несколько элементов страницы, которые должны появиться в списке из двух столбцов. 

  <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, двойной блок, так сказать, не переносится на следующий ряд. У меня есть более старая версия, в которой элементы

используются для упаковки двух отдельных элементов в один , двойных элементов в самостоятельно и (при помощи PHP), где необходимо, отдельных элементов в между двумя двойные коробки ... но подключать и отключать это через jQuery, чтобы позволить пользователям перетаскивать элементы на странице с трудом.

Итак, короче говоря: есть ли исправление для IE7, чтобы заставить его вести себя как FireFox?

С уважением, Отдел по делам о потерянных причинах.

UPDATE:

Благодаря идиотизму всплывающего 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 ]

1 голос
/ 30 июня 2010

Ваши lis плавают.Попробуйте указать clearing и width в lis, а не в div'ах внутри: 

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

<li class="double"></div>
0 голосов
/ 30 июня 2010

IE нужно, чтобы вы определили все, или он определит его для вас (и вам не понравится результат)

, если вы хотите, чтобы 1 li плавал рядом с другим, вам нужно определитьwidth, либо в жестком коде CSS, либо с помощью jQuery, измеряя внутреннее содержимое и устанавливая ширину родительского элемента в соответствии с этим.

...