Html 左/右浮动div，而不在大窗口上分隔它们

下面的示例显示左侧和右侧具有两种不同容器宽度的浮动div

对于大容器（或大窗口），左浮动的div将粘贴到左边框，右浮动的div将粘贴到右边框

当容器较大时，是否有办法强制div粘在一起（在容器中水平居中）？请注意，固定容器或任何div的宽度不是一个选项

理想情况下，我希望避免使用javascript

.container{
显示：内联块；
边框：1px纯黑；
}
.1{
浮动：左；
背景色：#aff；
}
.2{
浮动：对；
背景色：#ffa；
}
.3{
浮动：左；
背景色：#faf；
}

宽容器的第一个示例

我还不能评论，因为我是新来的。
那我就谈谈
如果我没弄错问题，你
可能在找

vertical-align: middle;

我希望这就是你要找的。
你是说类似的东西吗？只需从
.inner3
中删除浮动即可

.container {
  display: inline-block;
  border: 1px solid black;
}
.inner1 {
  float: left;
  background-color: #aff;
}
.inner2 {
  float: right;
  background-color: #ffa;
}
.inner3 {
  background-color: #faf;
}


宽容器的第一个示例

您可以使用CSS3
@media
查询。只需在屏幕上以400px及以上的宽度浮动div

.container {
  border: 1px solid black;
}
.inner1 {
  float: left;
  background-color: #aff;
}
.inner2 {
  float: right;
  background-color: #ffa;
}
.inner3 {
  float: left;
  background-color: #faf;
}

@media (min-width: 400px) {
  .container {
    margin: 0 auto;
  }
  .inner1 {
    float: left;
  }
  .inner2 {
    float: left;
  }
  .inner3 {
    float: left;
  }
}

容器将以屏幕宽度>=400px为中心。内部div将向左浮动。默认情况下，inner1、inner2和inner3将分别浮动到左侧、右侧和左侧

我认为，在这种情况下，删除
显示：内联块从
.container
添加
溢出：隐藏此处和进入
.inner3
：

.container {
  border: 1px solid black;
  overflow: hidden;
}
.inner1 {
  float: left;
  background-color: #aff;
}
.inner2 {
  float: right;
  background-color: #ffa;
}
.inner3 {
  overflow: hidden;
  background-color: #faf;
  float: left;
}

编辑jsfiddle:

我不是在寻找垂直对齐。仅水平，如问题中所述。使用您的解决方案，在扩展容器宽度时，inner1和inner2仍然是分开的。是吗？@fffred，使用
float
您没有不同的解决方案，因为它改变了DOM中其他元素的位置。在这种情况下，您可以将
@media
与其他样式一起用于不同的屏幕。但是，如果我还不知道div的大小，我应该使用什么媒体大小？所有div的大小取决于它们的内容。对于砌体，可以。但我还是更喜欢纯CSS解决方案。我相信这个解决方案不会阻止inner2和inner3分离。但感谢您尝试这不是一个好的解决方案，因为400px只是一个例子。我不希望这种情况发生在特定的规模。所有内部div都可以有任何大小。为什么要避免使用javascript？
.container {
  border: 1px solid black;
  overflow: hidden;
}
.inner1 {
  float: left;
  background-color: #aff;
}
.inner2 {
  float: right;
  background-color: #ffa;
}
.inner3 {
  overflow: hidden;
  background-color: #faf;
  float: left;
}