div 요소를 다른 div 요소로 둘러 쌀 방법

Question

이 질문은 반드시 대답해야하지만 google-foo는 실패합니다. 예쁜 다이어그램을 살펴 보자 : 그것은 탐색 DIV, 사이드 바 DIV 및 이미지와 텍스트가 포함 된 작은 div의 많은 거기에있는 컨테이너를 나타냅니다

 
+------------+ +--+ 
| nav  | | | 
+------------+ |s | 
+--+ +--+ +--+ |i | 
|:)| |:)| |:)| |d | 
+--+ +--+ +--+ |e | 
       | | 
+--+ +--+ +--+ | | 
|:)| |:)| |:)| | | 
+--+ +--+ +--+ +--+ 

+--+ +--+ +--+ +--+ 
|:)| |:)| |:)| |:)| 
+--+ +--+ +--+ +--+ 

.

사이드 바의 높이에 상관없이 이미지 div가 주어진 행의 열이 많은 멋진 행으로 표시됩니다. 그들은 사이드 바 아래 멋지게 감쌀 것이다.

나는 수백만 가지 방법을 시도했지만 이미지 div는 사이드 바 아래쪽에서 시작됩니다. 그렇지 않으면 2 행에 3 div가 생기고 4 번째 사이드 바에 의해 아래로 밀려납니다.

 
+------------+ +--+ 
| nav  | | | 
+------------+ |s | 
+--+ +--+ +--+ |i | 
|:)| |:)| |:)| |d | 
+--+ +--+ +--+ |e | 
       | | 
+--+ +--+ +--+ | | 
|:)| |:)| |:)| +--+ 
+--+ +--+ +--+ +--+ 
       |:(| 
       +--+ 
+--+ +--+ +--+ +--+ 
|:(| |:(| |:(| |:(| 
+--+ +--+ +--+ +--+ 

나는 분명한 뭔가를 놓치고 있습니까? 이것도 가능한가? 만약 그렇다면 어떻게 될까?

Answer 1

어때?

http://jsfiddle.net/antiflu/kwvcZ/

뒤에 아이디어는 사이드 바 플로트 (흐름에서 그것을 배치) 할 것입니다. 탐색 막대와 더미 항목은 흐름 (흐름 다음에 줄 바꿈이 있음)의 블록 요소 여야하며 이미지는 흐름의 인라인 요소 여야합니다 (텍스트처럼 페이지의 나머지 부분을 채 웁니다).

소스 코드 HTML :

<img class="sidebar" src="http://dummyimage.com/123x340"> 
<img class="nav" src="http://dummyimage.com/340x123"> 
<div class="break">Dummy</div> 
<img class="i1 top1" src="http://dummyimage.com/100x100"> 
<img class="i1" src="http://dummyimage.com/100x100"> 
(etc...) 

소스 코드 CSS :

img.nav {float: left;} 
img.sidebar {float:right;} 
div.break {clear: left;} 
img.i1 {display:inline; padding: 5px;} 

PS. IMG 태그를 사용하여 작업했지만 DIV를 사용할 수도 있습니다.

---

업데이트 :

: 위해 이미지 요소는 당신이 대신 I1 형 요소에 대한 인라인의 display: inline-block를 사용할 수있는 등 레이아웃을 사용할 수있는 자신의 권리를 블록 할 수 http://www.jsfiddle.net/antiflu/nqNeZ/

이 내 크롬에 깔끔하게 작동하지만 그러나 이러한 문제가 these 또는 these 지침에 따라 달려 드는 수 있습니다 IE와 파이어 폭스 2에 대한 cross-browser issues 몇으로 실행됩니다.