如何使用HTML和CSS创建网格视图布局

Question

我已经创建了响应如下的网格布局：

但我不想在第二行之后加上空格。 我想穿得像pintrest。

正是我想要的是：

我的样本： HTML

如果有人帮助完成此视图，我将适当提供:)

谢谢

Answer 1

您可以使用引导程序轻松完成此操作

例如

<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
</div>

添加所需的div。 它们将根据内容水平增长，然后向左浮动。

Answer 2

这是您的布局。.我们已经为您的布局创建了演示内容。

单击以下链接并下载源代码： http : //www.chameleoninfotech.com/theme/mansory-layout/mansory-layout.zip

希望对您有帮助。

Answer 3

这样的事情对您有用吗？ 基本上是我在评论中解释的内容：

例

我使用了table-layout:fixed以防止宽度弄乱。

您只需要调整列的宽度以适合您的内容