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