顶行的底部是否可以在没有包装的情况下绝对定位？

Question

如果容器中有背景图像和几个块，我试图实现下面的布局。也就是说，以行显示块，使得第一行的底部与固定的y值对齐。无论内容如何，​​同一行上的所有列都应该（看起来）具有相同的高度。通过将块A和B放在一个包装元素中来实现这一点是微不足道的，但我很好奇是否可以在没有这些元素的情况下完成：

＆＃13;

＆＃13;

<div id="container">
  <div id="A">
    <p>A1</p>
  </div>
  <div id="B">
    <p>B1</p>
    <p>B2</p>
  </div>
  <div id="C">
    <p>C1</p>
  </div>
  <div id="D">
    <p>D1</p>
    <p>D2</p>
  </div>
  <div id="E">
    <p>E1</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

到目前为止，我尝试将transform: translateY(-100%)应用于A和B，但这会在它们和以下块之间留下空隙。如果我能以某种方式让A，B和C在保持宽度的同时结束同一行，那么我可以移动A和B就这样，但它正在与flexbox战斗。

解决方案不一定是基于flexbox的，但我确实希望有一些不太讨厌的东西。

Answer 1

下面是CSS网格解决方案。 根据您的要求，您可能需要根据行和列进行一些操作。

* {
			box-sizing: border-box;
			font-family: sans-serif;
			font-size: 20px;
			font-weight: bolder;
			color: #484848;
		}
		body {
			margin: 0;
			padding: 0;
		}

		div {
			min-height: 100px;
			background-color: rgba(0,0,0,0.1);
		}

		p {
			margin: 0;
			text-align: center;
		}

		#A { 
			grid-area: areaA;
			background-color: cadetblue;
		}
		#B { 
			grid-area: areaB;
			background-color: darksalmon;
		}
		#C { 
			grid-area: areaC;
			background-color: beige;
		}
		#D { 
			grid-area: areaD;
			background-color: bisque;
		}
		#E { 
			grid-area: areaE;
			background-color: darkseagreen; 
		}

		/* Adjust the padding in acordance with the height of 'A' and 'y'  */
		#container {
			display: grid;
			grid-template-columns: 25% 25% 25% 25%;
			grid-template-rows: auto;
			grid-template-areas:
			"areaA areaB . ."
			"areaC areaC areaC areaC"
			"areaD areaD areaE areaE";
			grid-column-gap: 16px;
			grid-row-gap: 16px;
			padding-top: 100px; 
		}

		p {
			width: 100%;
	    position: relative;
	    top: 50%;
	    transform: translate3d(0,-50%,0);
		}

<div id="container">
  <div id="A">
    <p>A</p>
  </div>
  <div id="B">
    <p>B</p>
  </div>
  <div id="C">
    <p>C</p>
  </div>
  <div id="D">
    <p>D</p>
  </div>
  <div id="E">
    <p>E</p>
  </div>
</div>