CODEWITHSUNDEEP
jqueryhtmlcss
Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9508

Fill tiles one by one even different width and height

Please refer the image, I think once you see realize the issue.

I tested this tiles in two ways, like UL,LI list and by set of DIVs but none of was success. I just added float:left but as you see, in the third row, after the tall tile, forth row items does not fill to space.

Please change the name if not right meaning and googled but couldn't find should be my keyword want rich. Please guide me.

enter image description here

Upvotes: 0

Views: 900

Answers (2)

Snger
Snger

Reputation: 1384

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;}​

Upvotes: 1

Samwise
Samwise

Reputation: 306

I use JQuery Masonry for designing like this.

Using its CSS along with JQuery you should be easily able to get what you want.

Upvotes: 2

Related Questions