jquery - 幅と高さが異なるタイルを 1 つずつ塗りつぶします

Question

画像をご参照ください。

このタイルを UL、LI リストと DIV のセットのような 2 つの方法でテストしましたが、いずれも成功しませんでした。float:left を追加しましたが、ご覧のとおり、3 行目の背の高いタイルの後の 4 行目の項目はスペースを埋めません。

意味が正しくない場合は名前を変更して、グーグルで検索しても見つからなかった場合は、私のキーワードが金持ちになるはずです。私を案内してください。

Answer 1

このような設計にはJQuery Masonryを使用します。

その CSS を JQuery と一緒に使用すると、必要なものを簡単に取得できるはずです。

Answer 2

html

<table border="1">
  <tr>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
    <td colspan=2></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td rowspan=2></td>
  </tr>
    <tr>
    <td colspan=2></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
  </tr>
</table>​

css

table {background:black;}
td {background:blue;width:40px;height:40px;}​