javascript - 带有div的复杂html布局

Question

我想在 HTML5/Javascript 中使用拖放网格(由 div 元素组成)做一些海战游戏。起点是一个包含 20 * 20 个相同单元格的 div。

我必须执行一些复杂的布局，如下图所示，并且此布局可能会被 Javascript 动态修改(例如，当一艘船移动时)。

我知道如何合并行单元格，但我不知道如何合并列(如下例所示)。

是否可以使用 div 或者您会推荐一个 table 吗？

 _______________________
|__|__|__|__|__|__|  |__|
|__|__|__|__|__|__|__|__|
|__|__|_____|__|     |__|
|__|__|__|__|__|_____|__|
|__|__|__|__|__|__|__|__|

抱歉没有发布更好的图片，但我的声誉太低，无法发布图片。

Answer 1

为了简单地使用表格，您具有 rowspan 和 colspan 属性。但是为了便于维护，我建议不要使用表格，而是设计一个类似于 Bootstrap 实现基于表格布局的 div 的 div 布局。 http://getbootstrap.com/css/#tables

如果您的设计必须是响应式的，您不想使用 table、td、tr 元素，您将需要提出一个基于 div 的布局。

其他表格布局库/技术:http://www.sitepoint.com/responsive-data-tables-comprehensive-list-solutions/