Question

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

How it should work

在我删除组件之前
拖放2x2组件
将组件放在中间，两个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

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

1 个答案: