Question

请检查以下代码和问题

＆＃13;

your_list = [1, 2, 3, 3, 4]

uniques = [item for item in your_list if your_list.count(item) == 1]

＆＃13;

.container_12 {
  overflow: hidden;
}
.grid_4 {
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
}
.container_12 .grid_4 {
  width: 33.333333333333336%;
}

＆＃13;

在上面的代码中， grid_4 连续排列3，剩下的将换行到下一行。这些grid_4是动态生成的，甚至可以删除。例如，如果我删除Div 4和Div 5移动到Div 4的位置，如下面的代码

<div class="container_12">
  <div class="grid_4">Div 1</div>
  <div class="grid_4">Div 2 with extra content</div>
  <div class="grid_4">Div 3 with extra content</div>
  <div class="grid_4">Div 4</div>
  <div class="grid_4">Div 5 with extra content</div>
</div>

这些div具有不同的内容和不同的高度。所以问题是如何保持行高和每行12/4 = 3列？这可以通过jquery为元素设置高度来实现。但是还有其他任何可能的方法来实现这一点，只使用CSS [没有flexbox - 因为移动兼容性]

提前致谢。

Answer 1

CSS3 Flexbox 就是为此而推出的。它可以处理响应＆amp;简化代码和复杂的布局在不使用任何框架的情况下提高可读性。它也适用于所有最新的浏览器，包括IE11，部分支持IE9，IE10。 here is the CanIUse link

您可以通过以下代码轻松实现解决方案：

.container_12 {
  display: flex; //initialises flexbox
  flex-wrap: wrap; //tells it to wrap overflowing contents
}
.grid_4 { 
  flex: 0 0 33%;
}

就这么简单。 Codepen here

更好的是，它涵盖了你的动态高度和宽度要求。您还可以浏览flex property（flex-grow，flex-shrink，flex-basis的简写）以了解有关“展示”div的维度的更多信息

Answer 2

这是你的答案LIVE FIDDLE只需使用jquery-2.2.4.min.js作为宣传资源并缩短你的css部分并使用这个脚本

var maxHeight = 0;

$(".container_12").each(function() {
 if ($(this).height() > maxHeight) {
    maxHeight = $(this).height();
  }
});

$(".grid_4").height(maxHeight);

在单个容器中包含的不同行中具有相同高度的动态列

2 个答案: