div - IE 7의 부동 목록

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를 사용하고 있습니다. 일부 상자는 2 열 너비 및 일부 단일 열 (따라서 클래스)입니다. CSS는 파이어 폭스에서 아름답게 작동

... 내가 IE 7의 이중 상자 다음에 하나의 상자가있는 경우

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

이 ...하지만, 이중 상자가 다음에 포장하지 않습니다 말하라. 나는 (PHP를 통해) 자신에 < 리 >에 하나 개 < 리에 > 두 번 항목을 두 개의 단일 항목을 포장하기 위해 < 리에게 > 요소를 사용하는 이전 버전을 가지고, 어디 두 사이 < 리 >에 필요한 하나의 항목 이중 상자 ...하지만 jQuery를 통해 사용자가 끌어다 놓고 페이지 꼬리표 주위로 항목을 끌어다 놓을 수 있습니다.

짧은 이야기 : IE7이 FireFox처럼 동작하도록 수정 되었습니까?

UPDATE학과 원인 분실

종류, 안부 :

감사 divs 나에게 지적에 대해 걱정 후 lis 부동의 백치을 갖는에, 나는 다음과 함께했다 :

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

정말 깔끔하게 다루는 ... (제 생각에는). 하나의 긴 단일 항목을 여러 개의 더 짧은 단일 항목 옆에 둘 수 있습니다.

Answer 1

lis이 떠 있습니다. 당신이 모든 것을 정의하거나 당신을 위해 그것을 정의 할 것이다 (그리고 그 결과를 좋아하지 않을 것이다)에 대한

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

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

Answer 2

IE가 필요

다음 LIS 아니라 내부의 div의에 clearing 및 width를 지정하십시오 1 li가 다른 쪽 옆에 뜨길 원한다면 하드 코드 CSS 또는 내부 내용을 측정하고 그에 따라 부모의 너비를 설정하여 jQuery로 너비를 정의해야합니다.