HTML 中的 Google Plus 类型卡片布局答案

【问题标题】：Google Plus type cards layout in HTMLHTML 中的 Google Plus 类型卡片布局
【发布时间】：2014-04-13 14:43:52
【问题描述】：

在 Google Plus 中，他们使用看起来非常酷的卡片式布局。 Facebook 的时间线使用相同的布局。我想为我的网站实现这样的布局。但我不知道如何开始。以下是我需要知道的事情：

这种特殊布局类型的名称是什么？
如何在我的网页中实现此布局？

谢谢...

（这里有几张图片可以帮助您了解我在说什么）

Facebook Timeline Layout http://www.formicmedia.com/wp-content/uploads/2011/09/Capture2.jpg

【问题讨论】：

标签： html css google-plus facebook-timeline cardlayout

【解决方案1】：

这是一个使用 Bootstrap 的 Google plus 模板示例。它基本上是一种卡片布局，顶部有双导航栏。

代码：http://www.bootply.com/90113
预览：http://www.bootply.com/render/90113

<nav></nav>
<nav></nav>
<div class="container">
   <div class="row">
     <div class="col-md-4 col-sm-6">
        <!-- 1 or more panel/cards inside col -->
     </div>
     <div class="col-md-4 col-sm-6">
        <!-- 1 or more panel/cards inside col -->
     </div>
     <div class="col-md-4 col-sm-6">
        <!-- 1 or more panel/cards inside col -->
     </div>
   </div>
</div>

【讨论】：

谢谢，但我不需要所有这些。你能告诉我基本的布局吗，例如只拿空白卡片（空方块或
）。如何实现这样的基本布局？
一般来说，它是使用浮动 DIV 完成的，但有很多变化。检查 HTML 代码和 CSS 以了解它是如何完成的。
bootstrapzero 是一个损坏的链接。

【解决方案2】：

如果您想要 google 的卡片（用于 google keep、drive 等等），您可能需要使用材料设计。

Material CSS 是一个非常好的方法。它在 CSS 和 javascript 中实现 Material Design：

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">


<body>
  <div class="container">
    <div class="card">
      <div class="card-image waves-effect waves-block waves-light">
        <img class="activator" src="http://placeimg.com/320/240/any">
      </div>
      <div class="card-content">
        <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">Some information</i></span>
        <p><a href="#">This is a link</a>
        </p>
      </div>
      <div class="card-reveal">
        <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
        <p>Here is some more information about this product that is only revealed once clicked on.</p>
      </div>
    </div>
  </div>
</body>

它是 GitHub 上一个非常流行的库，并为包括 Sass 在内的许多框架/库提供了端口。我将此库用作 ruby gem。

【讨论】：