Как обернуть элементы div вокруг другого элемента div

Question

Это должен быть часто заданный вопрос, но мой google-foo не дает мне возможности. Посмотрите на симпатичную диаграмму:

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

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

Он представляет собой контейнер, в котором есть нав ДИВ, боковая панель DIV и много маленьких дивы, содержащих изображения и текст.

То, что я пытаюсь достичь, независимо от высоты боковой панели, div div будет отображаться в хороших строках с таким количеством столбцов в заданной строке, сколько будет соответствовать. Они красиво обернутся под боковой панелью.

Я пробовал миллион разных способов, но изображения divs начинаются ниже нижней части боковой панели, иначе строка 2 будет иметь 3 div, а затем четвертый, сдвинутый боковой панелью.

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

---

Update: Для того, чтобы элементы изображения, которые должны быть блоки в своем собственном праве, в котором вы можете использовать макет и т.д. Вы можете использовать display: inline-block вместо встроенного для элементов i1 типа:

http://www.jsfiddle.net/antiflu/nqNeZ/

Это работает аккуратно на моем Chrome, но вы будете работать в паре cross-browser issues для IE и Firefox 2. Однако эти проблемы могут быть решены следующие these или these руководящих принципов.