如何将div元素包装在另一个div元素周围

Question

这一定是一个经常回答的问题,但是我的google-foo让我失望了.看一下漂亮的图表:

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

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

它代表一个容器,其中有一个导航div,一个侧边栏div和许多包含图像和文本的小div.

我想要实现的是,无论侧边栏的高度如何,图像div都会显示在一个很好的行中,在给定的行中有尽可能多的列.他们将很好地包裹在侧边栏下.

我已经尝试了一百万种不同的方式,但是图像div要么从侧边栏的底部开始,要么第二行将有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.

更新:为了使图像元素本身成为可以使用布局等的块,您可以使用display: inline-block而不是内联的i1类型元素:

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

这在我的Chrome上运行得很好,但是你会遇到IE和Firefox 2 的几个跨浏览器问题.但是这些问题可以通过遵循这些或这些指南来解决.