底部和顶部对齐的文本和图像布局

Question

尝试创建这样的布局：

规则：

• 2栏。
• 每列可包含任意数量的图像（在我们的示例中为2和3）。
• 每张图片都可以有任意长度的标题。
• 每列中的第一批图像必须对齐。
• 每列中的最后一张图片必须对齐。
• 我们不知道会有多少行标题占用，但我们知道每张图片的宽高比。

JSFiddle https://jsfiddle.net/LpL2jmgj/当前正在进行的工作 如果我找到解决方案，会发布更新。

我想即使使用display:grid也无法通过CSS执行此操作？

Answer 1

这是你的答案??? 我只是使用弹性盒子和一点保证金，我希望你喜欢它：）

＆＃13;

＆＃13;

[HttpPost]
public ActionResult Data()
{
    var path = "Path to your JSON file goes here";
    var fileContents = System.IO.File.ReadAllText(path);
    var list = Newtonsoft.Json.JsonConvert.DeserializeObject<List<Coin>>(fileContents);
    return Json(list);
}

＆＃13;

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	
	box-sizing: border-box; 
}
.columns {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    flex-wrap: nowrap;
    margin : 5px;
}
.rows{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin : 5px;
    flex-wrap: nowrap;
}
p{
  margin : 2px;
}
.col {
  width: 100px;
  margin : 5px;
  position: relative;
}
.col1 {
  margin : 5px;
  flex : 5;
  background-color : red;
  height : 200vh;
}
.col2{
  margin : 5px;
  flex:3;
  background-color : blue;
  height : 200vh;
}
.image {
  width: 100%;
  position: relative;
  height: 0;
  overflow: hidden;
}
.image img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

＆＃13;

＆＃13;

＆＃13;