0

我将 Pinterest 视为一种设计灵感,它们具有固定宽度的列,但每个网格项都填充了所有可用空间(并且具有可变高度)。这是一个例子:

在此处输入图像描述

我的第一个想法是 flexbox 会在这里帮助我,但我运气不佳。这是我尝试过的:

<!DOCTYPE html>
<html>
<head>
  <style>
    .flex-container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;
      align-items: flex-start;
    }

    .flex-item {
      margin: 10px;
      background-color: #3299bb;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
  </style>
</head>
<body>
<div class='flex-container'>
  <div class='flex-item' style='height: 200px; width: 800px;'>
    <p>#1</p>
  </div>
  <div class='flex-item' style='height: 50px; width: 200px;'>
    <p>#2</p>
  </div>
  <div class='flex-item' style='height: 50px; width: 200px;'>
    <p>#3</p>
  </div>
</div>
</body>
</html>

我的问题相当简单。你如何设置你的 CSS 以使这种设计成为可能?

4

1 回答 1

0

这是一个很棒的插件,可以做到这一点。

http://masonry.desandro.com/

您可以将它与 jQuery 或 Vanilla JS 一起使用

这是仅使用 CSS 的另一种方法

http://w3bits.com/css-masonry/

于 2016-02-07T13:03:17.097 回答