每行不同列的HTML网格布局

Question

我想知道是否有人可以提供有关使用HTML实现以下布局的最佳方式的提示：

我尝试过使用常规HTML表格，但却无法获得不同列的不同行。

你们都可以推荐其他网格工具吗？

由于

Answer 1

我建议使用基于网格的系统。

Bootstrap就是一个很好的例子，请在此处找到更多信息：Bootstrap grid system

研究的其他选择是柔性盒和浮子。

第三，如果你必须使用表，你应该查看td元素的colspan属性或只使用多个表。

Answer 2

如果您不担心使用框架来实现这一目标，您可以考虑一下 http://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html 要么 http://getbootstrap.com/css/#grid 两个框架都提供了实现您想要做的事情的能力（在内部使用html，css和js）

Answer 3

以下是使用div的示例（点击“运行代码段”）：

some_php_page.php

* {
  box-sizing: border-box;
}

.row {
  clear: both;
}

.row > div {
  border: 2px solid #000;
  float: left;
  height: 30px;
}

.row-2 > div {
  width: 50%;
}

.row-3 > div {
  width: 33.33%;
  height: 50px;
}

Answer 4

他们必须是一张桌子吗？

你能不能有一张50/50宽的桌子，一张33/33/33宽的桌子和另外50/50宽的桌子？

那么他们又一次是桌子吗？您是否更关注网格列而不是表格行/列范例？