带div的复杂html布局

Question

我想使用拖放网格（由div元素组成）在HTML5 / Javascript中进行某种海战游戏。起点是div，有20 * 20个相同的单元格。

我必须执行一些复杂的布局，如下图所示，此布局可能会被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/

Answer 2

我会使用带div的网格。将船放在网格顶部的图像和存储船信息作为每个单元格的类属性。

Answer 3

bootstrap与jquery的组合应该是可能的，例如：

<div class="container">
  <div class="row">
    <div class="col-xs-3 shipSize3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-6 shipSize6"></div>
  </div>
</div>

然后你就可以用jquery（.removeClass（）,. addClass（））来改变类：

if (shipSize3 === 'killed'){
 $('div').removeClass('shipSize3');
} else {}

Answer 4

有可能here is the code。

截图：