如何用纯CSS实现多子元素容器的两栏布局：首元素独占一栏

如何将包含多个元素的容器拆分为两栏，仅第一个元素位于第一栏，其余元素全部位于第二栏？我尝试将第一个元素左浮动，但后续文本仍会流到其下方，且无法让浮动元素高度占满容器来避免此问题。

当前尝试的代码如下：

CSS代码 #

p > :first-child {
  width: 30px;
  height: 30px;
  float: left;
  margin-right: 1ch;
  text-indent: 100%;
  overflow: hidden;
  
  background: hotpink;
}

a {
  color: blue;
  text-decoration: underline;
}

HTML代码 #

<p>
    <a>Foobar</a>
    Lorem <a>ipsum dolor sit amet</a>, consectetur adipiscing elit. Etiam blandit erat dui, vitae condimentum augue congue non. Nam varius sem nibh, id tempor est aliquam quis. Mauris sagittis et magna a rhoncus. Integer arcu augue, hendrerit et lacinia at, aliquam in diam. Etiam venenatis quam elementum, facilisis diam nec, vestibulum sem. <a>In vitae velit tempus</a>, fermentum ligula ac, vehicula sem. Aenean tempus dui in nisi volutpat, pulvinar pulvinar augue ultricies. Proin sodales maximus metus accumsan sodales. <a>Sed malesuada leo et neque placerat</a>, non posuere mi cursus. Maecenas aliquam felis quis mattis tempor.
</p>

经分析，column布局要求等宽，grid布局会生成隐式行列，flex布局会破坏文本流，table布局需修改标记，均不可行。请问在不修改HTML标记的情况下，能否仅用CSS实现目标两栏布局，即首元素独占一栏，其下方无文本流动？

可以通过Grid布局实现需求，无需修改HTML标记，具体CSS调整如下：

p {
  display: grid;
  grid-template-columns: 30px 1fr; /* 第一列宽度匹配首元素，第二列占剩余全部空间 */
  gap: 1ch; /* 控制两列间距，替代原margin-right */
}

p > :first-child {
  width: 30px;
  height: 30px;
  text-indent: 100%;
  overflow: hidden;
  background: hotpink;
  grid-row: 1 / -1; /* 让首元素占据第一列的全部垂直空间，阻止其他内容流入 */
}

a {
  color: blue;
  text-decoration: underline;
}

原理说明 #

1. 给父容器<p>设置Grid布局，明确划分两列：第一列宽度与首元素一致，第二列自动填充剩余空间；
2. 通过grid-row: 1 / -1让首元素跨占第一列的所有行，彻底占据第一列的垂直区域；
3. 剩余的文本和元素会被Grid自动分配到第二列，保持正常的文本流，不会出现内容流到首元素下方的情况。

这种方法既保留了文本的正常排版，又满足了首元素独占一栏的需求，完全符合要求。

内容的提问来源于stack exchange，提问作者Quolonel Questions