Question

这一定是一个经常被回答的问题，但是我的google-foo让我失望了。看一下漂亮的图表：

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

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

它代表一个容器，其中有一个nav div，一个侧边栏div和许多包含图像和文本的小div。

我想要实现的是，无论侧边栏的高度如何，图像div都将以漂亮的行显示，并且在给定的行中具有尽可能多的列。他们很好地包裹在侧边栏下。

我已经尝试了一百万种不同的方式，但是图像div要么从侧边栏的底部开始，要么第二行将有3个div，然后是第四个，由侧边栏向下推。

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

我错过了一些明显的东西吗？这甚至是可能的，如果是的话，怎么样？

Answer 1

这个怎么样？

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

它背后的想法是你想要浮动侧边栏（将它放在流量之外）。导航栏和虚拟项应该是流中的块元素（在流之后，但之前有换行符），图像应该是流中的内联元素（填充页面的其余部分，如文本）。 / p>

源代码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，您会遇到几个cross-browser issues。但是，可以按照these或these指南解决这些问题。

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

1 个答案: