如何将div放在父div的相对两侧，父缩放的父宽相对于它们？

我有一个容器div （不能浮动）有两个孩子元素。我想要孩子的元素在对面 - 第一个在左边，第二个在右边。在100％浏览器宽度的儿童总结宽度小于容器，但在更大的规模上它不是，所以容器应该更大。如果容器长大后容器会长大，如何设置容器？如何将div放在父div的相对两侧，父缩放的父宽相对于它们？

UPD：像this 我需要的所有元素留一行在任何规模。

<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>

来源

2017-06-05 TEXHIK

什么是绿色的div宽度？ – tech2017

发布您试过的HTML和CSS请 – j08691

@ j08691页面代码太复杂。 – TEXHIK

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

它应该这样做。谷歌了解FlexBox简介，以获得良好的解释。

来源

2017-06-05 13:19:43 user8114611

使用正确的div，但左div的孩子现在正在下一行。 – TEXHIK

这样的事情？

我用display:flex让两个div排队很好，彩车只需要内盒装

https://jsfiddle.net/070rk2e1/1/

来源

2017-06-05 15:18:29 LaughingMan

宽度的百分比没有问题，但宽度无法修复。左边部分在不同条件下包含或多或少的元素，并且这些元素在px中具有绝对值。 – TEXHIK

我已经更新了我的jsfiddle，在左边部分有更多的div来向你展示它是如何工作的。 – LaughingMan

左容器中的分区正在关闭，但我需要它们来增加父容器。他们必须在所有尺度上保持一条线。 – TEXHIK

如何将div放在父div的相对两侧，父缩放的父宽相对于它们？

回答

相关问题