如何使用 CSS 和 JavaScript 创建可定制的动态网格布局？

Question

我正在从事一个涉及大量 CSS 的项目。客户希望在主页上有一个网格布局，他希望能够通过拖放重新排列 UI 组件。这些 UI 组件可以有不同的尺寸：1x1、2x2 和 3x3。当我将 UI 项放在所需的新位置时，它应该将其他组件推到一边。任何可能的孔都应该用 1x1 组件填充。

How it should work

1. 在我拖动组件之前
2. 拖动 2x2 组件
3. 将组件放在中间，两个 1x1 组件腾出空间并适应 2x2

注意，网格的大小不限于8 1x1，但高度和宽度应该可以扩大和变小。

我宁愿不使用表格，但除此之外我愿意接受建议。现在我刚刚使用了内联块 div，我可以拖放它来切换 jQuery DOM 对象。效果并不是客户想要的： How it is now

Answer 1

我用同样的想法做了很多动态布局。您需要更多地考虑如何从一个块到另一个块的浮动行为在接下来的块中停止，以便它们像您想要的那样正确重新定位。所以定义一个浮动停止元素是必要的。 您的块将与float:left 或float:right 一起使用。在某些时候，您会发现这种行为必须停止在最好的地方 CSS

.floatstop {
     clear: both; //the important code here..
     width: 100%;
     height: 1px;
     line-height: 1px;
     margin-top:-1px;
}

和 HTML

<div class="floatstop"></div> 

由所有需要边框到左侧（可能也是右侧）下一个块的块组成，您必须定义一个基本布局，该布局也为最右边放置的块留有空间，并为其提供边框空间，否则它会浮动在之前的街区下面。

但是有一种更现代的方式！ 您可以使用 CSS3 代码来定义您的布局。

.columnblock {
     width: 100%;
     column-gap: 30px;
     // for symmetric columned layouts use..
     column-count: 3; 
     // or for not symmetric layouts use..
     column-width: 280px;
}

<div class="columnblock">
    <p>Lorem Ipsum</p>
    <p>another Paragraph</p>
</div>

这里还有其他要提及的内容，但您可以阅读 http://www.w3schools.com/css3/css3_multiple_columns.asp