Question

我有一个用可折叠的div制作的流畅布局。当它们崩溃时，它们会在下面留下一个空的空间，它会被下一个div自动填充（它们都有float: left）。然而，这看起来不太好，我想保持“行结构”而不会失去移动div的能力（当窗口变小时）。 JSFiddle here.

Problem description

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。我知道我可以动态确定列数，然后将它们包装成“行”，但我还不愿意使用这个解决方案。

Answer 1

将您的float: left更改为display: inline-block。这是我对你的小提琴的唯一改变，似乎给你正在寻找的效果。

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

具有可折叠div的流布局，可维护行结构

1 个答案: