我有一个使用可折叠 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"> 1 </div>
<div class="clickable"> 2 </div>
<div class="clickable"> 3 </div>
<div class="clickable"> 4 </div>
<div class="clickable"> 5 </div>
<div class="clickable"> 6 </div>
</body>
<html>
有纯 CSS 解决方案吗?我不想弄乱JavaScript。我知道我可以动态确定列数,然后将它们包装成“行”,但我还不愿意使用这个解决方案。