谁能告诉我如何对齐 Metro UI CSS 布局图块答案

【问题标题】：Can anyone tell me how to align metro UI CSS Layout tiles谁能告诉我如何对齐 Metro UI CSS 布局图块
【发布时间】：2013-11-22 09:45:44
【问题描述】：

问题是我在第一行有一对跨度 4 和跨度 5 的瓷砖，在下一个我有一个跨度 9 的大瓷砖......但是一切都错了一些关于为什么会发生的想法？？？

我正在使用带有 JQuery 2.xx 的 Chrome 31 -- Metro UI CSS 2.0

网格的宽度默认为940px..

<body class="metro">
<div class="wrapper">

<div class="board grid">

<div class="row">
<div class="span4 bg-red tile header">size 4</div>
<div class="span5 bg-red tile header">size 5 </div>
</div>

<div class="row">
<div class="span9  bg-cyan tile weather header ">size 9</div>
</div>


<div class="row">
<div class="span2  bg-pink tile weather header ">size 2</div>
<div class="span6  bg-yellow tile weather header ">size 6</div>
<div class="span1  bg-orange tile weather subheader ">size 1</div>
</div>

</div>
</div>

“包装器是空白的”

现在它看起来像这样： https://drive.google.com/file/d/0B2KdeNv2dTpxMU1NcF94eVBmeTQ/edit?usp=sharing

【问题讨论】：

你能发布一些代码、小提琴和/或你已经尝试过的东西吗？否则就像试图在海滩上找到特定的沙粒:(
无代码盲问...

标签： jquery css html dom

【解决方案1】：

您必须在每行中将跨度添加到 12 个网格..

【讨论】：

发生这种情况drive.google.com/file/d/0B2KdeNv2dTpxWG53Y2ZrVUs2V0U/…
尝试为每个班级跨度添加偏移量。
size 4
该框与之前的框对齐，但其他框甚至没有给它们偏移以匹配 12 列
okk，你应该在你创建的每一列中使用一行，以便根据你的目的显示..

【解决方案2】：

如果您对此处的链接感兴趣，我会使用一个名为 Gridster 的插件来解决此问题：Plugin to design Metro UI style layout它可以让您在屏幕上拖动块，直到您获得所需的位置。甚至你可以决定是否让用户可以拖动块。

【讨论】：