Html 如何将div放置在父div的对侧，父div的宽度相对于它们的比例？

我有一个容器div（不能浮动），有两个子元素。我希望子元素位于相反的边上-第一个在左边，第二个在右边。在100%浏览器宽度上，子项摘要宽度小于容器，但在更大的比例上则不是，所以容器也应该更大。如何设置容器，使其在gloat child grow时增长

UPD:类似 我需要所有元素在任何比例下都保持一条直线

 <div id="page">
     <div id="container">
         <div id="left">
           <div>first</div>
           <div>second</div>
           <div>third</div>
         </div>
         <div id="right">
            right
         </div>
      </div>
    </div>
    <style>
    #page {
      background-color: grey;
      width: 100%;
      height: 300px;
    }
    #container {
      /*this styles are needed to other parts*/
      position: relative; 
      clear: both;
      /*=====================================*/
      background-color:red;
      height: 50px;
      width: 90%;
      margin: 0 5%;
    }
    #left {
        float: left;
        background-color: blue;
    }
    #left div {
      width: 50px;
      display: inline-block;
    }
    #right{
     float: right; 
     background-color: green;
     display: block;
     max-width: 200px;
    }
    </style>

第一
第二
第三
正确的
#页面{
背景颜色：灰色；
宽度：100%；
高度：300px；
}
#容器{
/*其他零件需要此样式*/
位置：相对位置；
明确：两者皆有；
/*=====================================*/
背景色：红色；
高度：50px；
宽度：90%；
利润率：0.5%；
}
#左{
浮动：左；
背景颜色：蓝色；
}
#左div{
宽度：50px；
显示：内联块；
}
#对{
浮动：对；
背景颜色：绿色；
显示：块；
最大宽度：200px；
}

它应该这样做。 谷歌上的FlexBox介绍，很好的解释

它应该这样做。 用谷歌搜索FlexBox简介以获得更好的解释。

类似的内容

我使用了

display:flex

让两个div很好地排列在一起，浮动仅用于内部框

像这样的事

我使用了

display:flex

让两个div很好地排列在一起，浮动仅用于内部框

---

---

什么是绿色div width？？发布您尝试过的HTML和CSSplease@j08691页面代码太复杂了。@TEXHIK，所以请简化它，然后发布它。只需去掉所有我们不需要看到的内容，并向我们提供迄今为止您创建它的基本方式。什么是绿色div width？发布您尝试过的HTML和CSSplease@j08691页面代码太复杂了。@TEXHIK，所以请简化它，然后发布它。只需去掉所有我们不需要看到的内容，并向我们提供迄今为止您创建它的基本方式。使用右div，但左div的子项现在改为下一行。使用右div，但左div的子项现在改为下一行。使用%的宽度没有问题，但宽度无法固定。左侧部分在不同的D条件下包含更多或更少的元素，并且这些元素在px中具有绝对withd。我已经在左侧部分中使用更多的div更新了我的JSFIDLE，以向您展示它是如何工作的。左侧容器中的div正在下降，但我需要它们来增加parent。它们必须在所有刻度上保持一行。您可以给左容器一个

最小宽度

。如果您想避免这种情况，我建议使用媒体查询来控制不同屏幕大小上的盒子/容器的宽度，宽度为%，没有问题，但宽度无法固定。左侧部分在不同的D条件下包含更多或更少的元素，并且这些元素在px中具有绝对withd。我已经在左侧部分中使用更多的div更新了我的JSFIDLE，以向您展示它是如何工作的。左侧容器中的div正在下降，但我需要它们来增加parent。它们必须在所有刻度上保持一行。您可以给左容器一个

最小宽度

。如果你想避免这种情况，我建议使用媒体查询来控制不同屏幕大小的盒子/容器的宽度

.container {
  display: flex;
  justify-content: space-between;
}