5

我有一个使用可折叠 div 制作的流畅布局。当它们折叠时,它们会在下面留下一个空白空间,由下一个 div 自动填充(它们都有float: left)。然而,这看起来并不好,我想保持“行结构”而不失去移动 div 的能力(当窗口变小时)。JSFiddle在这里。

问题描述

CSS 片段:

.clickable {
     border: 1px dotted black;
     width: 200px;
     float: left;
     height:50px;
     margin-right:20px;
     margin-bottom:20px;
}

HTML 片段:

<html>
<head><title>Layout test</title></head>
<body>
   <div class="clickable">&nbsp;1&nbsp;</div>
   <div class="clickable">&nbsp;2&nbsp;</div>
   <div class="clickable">&nbsp;3&nbsp;</div>
   <div class="clickable">&nbsp;4&nbsp;</div>
   <div class="clickable">&nbsp;5&nbsp;</div>
   <div class="clickable">&nbsp;6&nbsp;</div>
</body>
<html>

有纯 CSS 解决方案吗?我不想弄乱JavaScript。我知道我可以动态确定列数,然后将它们包装成“行”,但我还不愿意使用这个解决方案。

4

1 回答 1

11

将您的更改float: leftdisplay: inline-block. 这是我对您的小提琴所做的唯一更改,并且似乎给出了您正在寻找的效果。

http://jsfiddle.net/GLf7m/2/

于 2013-11-07T14:16:50.360 回答