상대적으로 배치 된 웹 페이지의 인라인 DIV의 두 번째 행에서 DIV를 올바르게 플로팅하는 방법은 무엇입니까?

Question

웹 페이지가 상대적으로 배치되었습니다. 사용자의 화면 해상도에 따라 확대 및 축소됩니다.

.box { width:200px;height:300px;display:inline-block;*display:inline;margin-right:20px } 
.ad { width:420px;height:300px;float:right } 

내 문제 :

<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="ad"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
etc... 

CSS는 다음과 같이이다 : 내 시나리오를 그릴 쉽게 때문에, 여기 내 간단한 레이아웃입니다 :

그리고 여기에 간단한 HTML이다 그림에 나와 있습니다 - 나는 .ad 오른쪽으로 떠올라 야하지만 두 번째 줄에는 떠 있어야합니다. 그것은 다른 브라우저에서 잘 작동하지만 IE는 문제입니다. 그냥 다음 행 (세 번째 행)에 .ad을 띄웁니다. 거기 crossbrowser (IE7 이상), 아마도 순수 CSS (조건, JS 사용할 수 있습니다) 솔루션이 있나요?

대단히 감사합니다.

그리드 시스템의 일종으로 나타납니다

Answer 1

이 용 IE에서 작동하는 것 같군 나, 그것을 포함하는 고정 너비와 래퍼를 추가했지만 폭없이 작동해야합니다.

http://jsfiddle.net/9c2Fh/2/

HTML :

<div class='wrapper'> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="ad"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
</div> 

CSS

.box { 
    width:100px; 
    background:red; 
    height:100px; 
    float:left; 
    margin:5px 
} 
.ad { 
    display:inline-block; 
    position:relative; 
    background:green; 
    width:200px; 
    height:100px; 
    margin:5px; 
} 
.wrapper{ 
    text-align:right; 
    float:left; 
    width:330px; 
} 

내가 한 것 : 상자 그냥 떠, 그리고 왼쪽에서 오른쪽으로 열린 공간을 채우고 있습니다. 광고는 인라인 블록으로 표시되므로 래퍼의 텍스트 정렬의 영향을받습니다. 광고가 오른쪽으로 당겨지며 블록이 다른 공간을 채 웁니다.

Answer 2

, 같은 http://960.gs/로 - 거기에 몇 가지 CSS를 그리드가 밖으로 프레임 워크이며, 나는 이미이 문제를 해결 한 의심은 ...