你说的这个布局确实有点绕，但不用加空元素也能实现，我给你两个靠谱的方案：

CSS Grid 方案（推荐） #

利用Grid的跨列特性和宽度计算，完美匹配你的需求：

.container {
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 100px;
  border: 1px solid #ccc;
}

.item1 {
  grid-column: 1;
  justify-self: start;
  background: #f0f0f0;
  padding: 20px;
}

.item2 {
  grid-column: 1 / -1; /* 让元素跨整个容器宽度 */
  margin-left: 50%; /* 左边距设为50%，对齐页面中心 */
  width: 50%; /* 占满从中心到右侧的空间 */
  background: #e0e0e0;
  box-sizing: border-box;
  padding: 20px;
}

原理很简单：让第二个元素跨列后，通过 margin-left:50% 定位到页面中心，再用 width:50% 填充右侧剩余区域。

Flexbox 方案 #

用绝对定位配合Flex的弹性特性，同样不需要修改HTML：

.container {
  display: flex;
  position: relative;
  min-height: 100px;
  border: 1px solid #ccc;
}

.item1 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #f0f0f0;
  padding: 20px;
}

.item2 {
  margin-left: 50%; /* 对齐页面中心 */
  flex-grow: 1; /* 填充右侧剩余宽度 */
  background: #e0e0e0;
  padding: 20px;
}

这里给容器加相对定位，把第一个元素固定在左侧，第二个元素通过 margin-left 对齐中心，再用 flex-grow:1 占满剩余空间。

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