Html 当左列具有固定宽度时，如何使右列占据整个剩余空间，然后将文本居中？

当左栏的宽度固定时，如何使右栏占据整个剩余空间，然后使其中的元素居中

这就是我到目前为止得到的。它创建一个仅与文本一样宽的右列，并将该列发送到父元素的右侧

#左栏{
宽度：250px；
浮动：左；
}
#右柱{
宽度：自动；
文本对齐：居中；
浮动：对；
}
#右列元素{
颜色：#f00；
显示：内联块；
}

文本

您可以使用绝对位置并设置顶部和左侧：

#左栏{
宽度：250px；
浮动：左；
边框：1px纯红；
高度：200px；
}
#右柱{
位置：绝对位置；
边框：1px纯蓝色；
左：50%；
最高：50%；
高度：自动；
转换：翻译（-50%，-50%）；
边框：1px纯绿色；
}

左左
文本
跨度
最后一个

最简单的方法是使用flexbox并将

flex grow

分配给要占用可用空间的元素

.wrap{
显示器：flex；
}
#左列{
宽度：100px；
背景：#ccc；
}
#右柱{
柔性生长：1；
文本对齐：居中；
背景：#eee；
}

文本

Flexbox 您可以设置

flex:1用于流体元件，不收缩


.flex{
显示器：flex；
}
.固定{
宽度：250px；
边框：1px纯绿色；
}
.液体{
弹性：1；
文本对齐：居中；
边框：1px纯红；
}

固定的
流质
一种方法是设置右列元素的margin left属性以匹配左列元素的宽度

#left-col {
  width: 250px;
  float: left;
  border: 1px solid black;
}

#right-col {
  margin-left:250px;
  text-align: center;
  border: 1px solid red;
}

请参见此处的fiddle
为文本辩护是不对的。当您浮动一个元素时，它将只与其中的内容一样大。如果内容只是一个单词，那么列的宽度就只有单词的宽度。文本居中，只是看起来不像那样，因为列的宽度只有单词的宽度。如果要查看它是否居中，请为该列指定一个超过该单词的宽度。感谢@GCyrillus教我如何发布代码片段！我以后会这样做的。谢谢@MichaelCoker。我将重新措辞这个问题。谢谢，但这不是我想要的。使用此代码，当我缩小屏幕宽度时，右栏中的文本位于左栏的顶部。请你解释一下第一点好吗？这里我的左栏和右栏是具有不同样式的一次性元素。我知道ID适合这些元素。谢谢。这就完成了任务，而且非常干净。但我需要在我使用的浏览器FF50的右栏添加“宽度：自动”。谢谢。使用“溢出：隐藏”非常简洁。