Question

我的div列看起来像下面的截图。无论内容的差异如何，我如何对齐列以使它们的高度相同？使用普通的html / css或javascript / jquery / angularjs的帮助，但没有bootstrap，因为我不允许使用该框架。

Answer 1

你看过.galeria_packs { display: flex; flex-wrap: wrap; }了吗？我相信它能做到你想要的：

data have;
input CustID $ ProdID $ ExpDate ;
attrib
  ExpDate format=date9. informat=date9.
;
datalines;
    AAA111  Product1    15MAY2017
    AAA112  Product1    21JAN2017
run;

data want;
  set have;

  * Which start date do you want ?;
  start_date = today(); * looking forward only;
  start_date = intnx('year', ExpDate, 0); * first of the year of the expiration date;
  start_date = intnx('year', today(), 0); * first of the year at run-time;

  date = start_date;
  do index = 1 by 1 while (date < ExpDate);
    year = Year(date);
    month = Month(date);
    output;
    date = intnx('month', date, 1);

    if index > 1e5 then leave; * guard against coding/data errors causing to many loops;
  end;
  format month z2.;
  keep CustID ProdID year month;
run;

这应该使每一行的高度相同，即使其中一个框中的内容多于其他框。

继续（快速）工作Fiddle，显示结果。

Answer 2

通过将display:flex添加到容器中，所有子项都将具有相同的高度。

但他们也都在同一排。要限制每行3个，就像上面的模拟一样 - 将flex-wrap: wrap;添加到容器中。并确保您的物品有宽度。

.galeria_packs {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

使用您提供的代码查看jsfiddle： http://jsfiddle.net/yv363pcy/

如何对齐我的div列

2 个答案: