html - 带有 "TILES "的 CSS 和 DIV 3 列

Question

我正在尝试做一个看起来像这样的网站:

所以每个单元格都有一个基于内容的大小。我坚持使用它的 CSS 部分，不知道如何做到这一点？

关于我正在尝试做的真实示例:

http://yourquestions.mcdonalds.ca/

谢谢

Answer 1

您有两种可能的方法来解决这个问题。

1. 使用 jQuery API 为您完成(Masonry 是一个好的开始)。
2. 将您的数据分成三个部分(参见工作示例)

table {
  float: left;
  margin-right: 0.2em;
}
table.left tr td {
  background-color: red;
}

table.middle tr td {
  background-color: blue;
}

table.right tr td {
  background-color: green;
}

<table class="left">
<tr>
  <td style="height:10em">
	<div>Left 1</div>
  </td>
</tr>
<tr>
  <td>
	<div style="height:2em">Left 2</div>
  </td>
</tr>
<tr>
  <td>
	<div style="height:3em"> Left 3</div>
  </td>
</tr>
</table>

<table class="middle">
<tr>
  <td>
	<div style="height:1em">Middle 1</div>
  </td>
</tr>
<tr>
  <td>
	<div style="height:4em">Middle 2</div>
  </td>
  </tr>
  <tr>
    <td>
	  <div style="height:7em">Middle 3</div>
	 </td>
  </tr>
</table>

<table class="right">
  <tr>
	<td>
	  <div style="height:5em">Right 1</div>
	</td>
	</tr>
  <tr>
	<td>
	  <div style="height:5em">Right 2</div>
	 </td>
  </tr>
  <tr>
    <td>
		<div style="height:8em">Right 3</div>
	</td>
  </tr>
</table>