没问题，我来帮你搞定这个布局需求！首先明确咱们的核心目标：

• 左侧固定宽度的红色区块，内部文本居中（你已实现，这里可以用更规范的方式优化）
• 右侧绿色区块自动填满左侧区块之外的所有剩余空间，同时内部文本要在这个绿色区块的正中央

原代码的问题分析 #

你之前用 inline-block 布局左右区块，这种方式的局限很明显：inline-block 元素的宽度只会贴合自身内容，不会主动占据容器的剩余可用空间，所以绿色块自然没法填充剩下的页面空间。另外，你给左侧加了 justify-content: center，但这个属性是Flex容器专属，在非Flex上下文里完全不起作用哦。

最优解决方案：Flexbox布局 #

Flexbox是处理这类「固定宽度+剩余空间填充」布局的最佳选择，代码简洁且兼容性拉满。下面是完整的实现代码：

HTML结构

<div class="container">
  <div id="left"> CONTENT </div>
  <div id="right"> Other content </div>
</div>

CSS样式

html, body { 
  height: 100%; 
  margin: 0; /* 去掉默认边距，避免页面出现不必要的滚动条 */
}

.container {
  display: flex; /* 把容器设置为Flex布局上下文 */
  height: 200px; /* 对应你原代码的区块高度 */
  width: 100%; /* 让容器占满父元素宽度 */
}

#left {
  width: 200px; /* 固定宽度 */
  background: #f00;
  display: flex; /* 用Flex实现内部文本居中，比text-align更灵活 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（按需选择，原代码没提但实用性强） */
}

#right {
  flex: 1; /* 关键属性！让这个区块自动填充所有剩余可用空间 */
  background: #0f0;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

代码关键说明 #

1. 父容器 .container：设置 display: flex 后，内部子元素会自动变为Flex项目，默认横向排列。
2. 左侧区块 #left：固定宽度200px，用Flex布局实现内部文本的水平+垂直居中（如果只需要水平居中，保留 text-align: center 也可行，但Flex适配场景更多）。
3. 右侧区块 #right：flex: 1 是核心，它会告诉Flex容器：这个区块要占据父容器中除固定宽度元素外的所有剩余空间。同样用Flex布局让内部文本在绿色块的正中央。

这样就能完美实现你要的效果：红色块符合预期，绿色块填满剩余空间，两段文本都在各自区块的正确位置。

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