7

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

它应该如何工作

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

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

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

4

1 回答 1

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

于 2013-04-12T11:47:07.320 回答