Html CSS至右侧间隙中的中心div

我正在努力用CSS建立一个真正基本的布局。我创建了以下JSFIDLE来帮助解释（代码复制如下）

基本上，我想要的是第一、第二和第三个div在一行上，第一和第二个div按顺序放置在尽可能远的左侧，第三个div居中于第二个div右侧的空间。该行应水平填充100%，这样，当窗口调整大小时，第三个div将保持在第二个div右侧空间的中心，而第一个和第二个div保持静止

#外部容器{
位置：绝对位置；
宽度：100%；
}
#内胆{
位置：相对位置；
宽度：400px；
}
#一个{
宽度：200px；
文本对齐：居中；
浮动：左；
}
#两个{
宽度：200px；
文本对齐：居中；
浮动：左；
}
#三{
宽度：200px；
文本对齐：居中；
左边距：自动；
右边距：自动；
}

一
二
三

我不知道您为什么需要

内部容器。无需使用
内部容器
（当然，如果html是可编辑的），就可以实现所需的功能

让我解释一下，而不是仅仅给出代码：

您可以向左浮动前两个
div。这将使它们彼此相邻对齐。然后，您可以在父对象上添加一个
text align:center
，这将负责第三个
div
的居中对齐

您可以查看JSFiddle链接，以便调整大小，并看到第三个
div
在调整浏览器窗口大小时居中对齐


div{
显示：内联块；
高度：100px；
宽度：50px；
}
分区外容器{
显示：块；
文本对齐：居中；
宽度：100%；
}
.一{
背景颜色：橙色；
浮动：左；
}
.二{
背景色：红色；
浮动：左；
}
.三{
背景颜色：黄色；
}

一个
两个
三
再加上Satwik Nadkarny的答案，如果您知道div 1和div 2设置为200px，您可以通过给出div 3的宽度将3设置为剩余值：

width: calc (100% - 400px);

它只获取浏览器窗口的宽度，并减去div 1和div 2的宽度

div {
  display:inline-block;
  height: 100px;
  width: 50px;
}

div.outer-container {
  display: block;
  text-align: center;
  width: 100%;
}

.one {
  background-color:orange;
  float:left;
  width: 200px;
}
.two {
  background-color:red;
  float:left;
  width: 200px;
}

.three {
  background-color:yellow;
  width: calc(100% - 400px);
}

谢谢，这真的很有帮助。我已经试着将教学内容翻译成我的实际站点，但可以肯定的是，按照这个简单的示例，它并不能很好地工作。第三个div中的文本由于某种原因浮动到顶部，尽管设置了页边距顶部。是否允许我发布一个指向该站点的链接，以便您（和其他人）可以直接查看源代码？@drmrbrewer是的，您可以发布一个指向该站点的链接，或者创建您的问题的JSFIDLE示例（如果您以前没有创建过，请参阅我创建它的方式）。这将有助于我们为您所面临的问题提供具体的解决方案。哦，没关系，我找到了原因。。。我在使用
span
时，似乎应该使用
div
。以下是我对这个问题的直截了当的回答：。现在它开始工作了。快速跟进：即使您不使用div作为文本，使用
text align
是否也是推荐的方法？参见例如@drmrbrewer是的，它是<代码>文本对齐：居中
通常用于居中内容。这些内容可以是文本或容器。很酷，我不知道
calc（）
，但今天早些时候我想知道这样的事情是否可行。谢谢。是的，CSS在很大程度上不使用传统的语句，比如IF或ELSE。然而，它确实有能力做数学，这可能是非常强大的！