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

Question

尝试创建这样的布局：

规则：

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

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

我想即使使用display:grid 也不可能仅通过 CSS 做到这一点？

Answer 1

这是你的答案？？？ 我只是使用弹性盒子和一点边距，希望你喜欢它:)

* {
	-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>