如何使用CSS和JavaScript創建可自定義的動態網格布局？

Question

我正在開發一個涉及大量CSS的項目。 客戶希望在主頁上具有網格布局，他希望能夠通過拖放重新排列UI組件。 這些UI組件可以具有不同的大小：1x1,2x2和3x3。 當我將UI項目放在所需的新位置時，它應該將其他組件推到一邊。 任何可能的孔應填充1x1組件。

它應該如何工作

1. 在我放棄一個組件之前
2. 拖動2x2組件
3. 將組件放在中間，兩個1x1組件可以騰出空間並適應2x2

請注意，網格的大小不限於8 1x1，但高度和寬度應該可以擴展並縮小。

我寧願不使用表格，但除此之外，我願意接受建議。 現在我剛剛使用了內聯塊div，我可以拖放來切換jQuery DOM對象。 效果並不是客戶想要的： 現在如何

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