Question

我有一些数据（盒子）应该显示为画廊项目（如在任何购物网站），问题是每个盒子的高度不一样，因为它的内容和每行有4个项目（盒子），让我们说如果第一个框中的一个高度为300px而其他所有高度为250px，则下一个项目从第一行中的最大高度结束开始，我不想这样，我不想要这些空格，每个框都在下一行应显示在第一行的框下

这是我的代码

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
  width: 400px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 122px;
  margin: 0 10px 10px 0;
  float: left;
  padding: 15px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2flex item 2flex item 2flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

</body>
</html>

Answer 1

你可以用flex而不是行来做。您必须使用flex-direction: column;和align-content属性。检查这个小提琴。

https://jsfiddle.net/4evoq3nt/1/

Answer 2

据我所知，您正在寻找的效果称为Masonry或Pinterest效果。 This is a good plugin for it.

以下是您实施砌体的代码：https://jsfiddle.net/jwjkt933/

用于初始化砌体的jQuery代码：

(function($) {
  $('.flex-container').masonry({
    columnWidth: 152,
    gutter: 10,
    itemSelector: '.flex-item'
  });
})(jQuery);

此示例还需要jQuery，尽管您也可以使用纯JS初始化砌体。

Answer 3

你需要为flex-item设置一个特定方式的最小高度和高度，尽管有这些内容，你将始终在flex-container中获得相同大小的框，如下所示：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
  width: 400px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 122px;
  margin: 0 10px 10px 0;
  float: left;
  padding: 15px;
  height:100%;
  min-height: 75px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2flex item 2flex item 2flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

</body>
</html>

＆＃13;

请务必注意上面示例中使用的最小高度和高度参数

显示项目时的定位问题，如图库项目

3 个答案: