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

Question

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

csshtml

4

这可能是一个常见的问题，但我的谷歌搜索失败了。看一下这个漂亮的图表：

它表示一个包含导航div、侧边栏div和许多包含图像和文本的小div的容器。

我想要实现的是，无论侧边栏的高度如何，图像div都会以漂亮的行出现，每一行中有尽可能多的列。它们将在侧边栏下面很好地换行。

我尝试了无数种方法，但图像div要么从侧边栏底部开始，要么第二行会有3个div，然后是第四个div，被侧边栏推下来。

我是否缺少明显的东西？这是否可能，如果可能，如何实现？

- jah

这是什么，它在哪里使用？ - kobe

你的意思是什么呢，政府？你认为我错过了一些重要的信息吗？ - jah

我只是随便问一下上面那个HTML是什么，它在哪里被使用，我从来没有说过类似的话。 - kobe

这是一个正在开发中的在线商店，笑脸代表产品缩略图。我还能告诉你什么？ - jah

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- littlegreen · Accepted Answer

这个怎么样？ 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;}

附注：我使用了IMG标签来实现，但是你同样可以使用DIV。

更新: 为了让图像元素成为自己的块，您可以使用display: inline-block而不是inline用于i1类型元素:

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

这在我的Chrome上运行得很好，但是您会在IE和Firefox 2中遇到一些跨浏览器问题。但这些问题可以通过遵循这些或这些指南来解决。