css - 像我的项目的网站网格一样的 Windows

Question

你好 CSS 爱好者！

我有一个问题问你。我想做一个像 Windows 一样的投资组合网格。其实我已经自己做了，但效果并不理想。

如果你在这里看到我的第一个例子

在此处输入图像描述

这是我现在的网格。这是CSS：

article {
  width: 230px;
  height: 200px;
  display: inline-block;
}

article.highlight {
  width: 470px;
  height: 410px;
}

现在，这就是我想要的样子：

在此处输入图像描述

有人有解决方案吗？

score 1 · Accepted Answer

1

article.highlight {
  width: 470px;
  height: 410px;
  float: left;
}

于 2013-10-08T07:12:51.183 回答

score 0 · Accepted Answer

0

 article{
 float:left;
 display:block;
 }

于 2013-10-08T07:13:06.423 回答

score 0 · Accepted Answer

你可能会看看很棒的 Javascript 库Masonry，它完美地将这些正方形放入灵活的网格中。

3 回答 3