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

Question

尝试创建这样的布局:

规则:

• 2 列。
• 每一列可以包含任意数量的图像(在我们的例子中是 2 和 3)。
• 每张图片都可以有任意长度的说明。
• 每列中的第一张图片必须对齐。
• 每列中的最后一张图片必须对齐。
• 我们不知道标题会占用多少行，但我们知道每张图片的纵横比。

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

我想即使使用 display:grid 也无法通过 CSS 做到这一点？

Answer 1

这是你的答案吗？？？我只是使用了 flex box 和一点边距，我希望你喜欢它:)

* {
	-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%;
}

<div class="rows">
  <div class="col1">
     <div class="columns">
      <img style="width:100%;" src="https://dummyimage.com/600x400/000/fff" />
      <p>text</p>
    </div>
    <div class="columns">
    <img style="width:100%;" src="https://dummyimage.com/600x400/000/fff" />
      <div class="rows">
      <p>text</p>
      <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
      <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
      </div>
    </div>
  </div>
  <div class="col2">
   <div class="columns">
      <img style="width:100%" src="https://dummyimage.com/600x400/000/fff" />
      <div class="rows"><p>text</p> <p>text</p> <p>text</p> </div>
      <div class="rows"><p>text</p> <p>text</p> <p>text</p> </div>
      <div class="rows"><p>text</p> <p>text</p> <p>text</p> </div>
    </div>
    <div class="columns">
      <img style="width:100%" src="https://dummyimage.com/600x400/000/fff" />
      <p>text</p>
    </div>
    <div class="columns">
      <img style="width:100%" src="https://dummyimage.com/600x400/000/fff" />
      <p>text</p>
    </div>
  </div>
</div>