css - 在 div 中定位 inline-flex 元素

Question

我试图在一个 div 中并排放置两个单独的元素，但第二个元素应该在 div 的右侧

<div className={classes.container}>
   <div className={classes.first}>
       First
   </div>
   <div className={classes.second}>
       Second
   </div>
<div>

我试图将两者display: "inline-flex"并排放置。然后我尝试将第二个 div 移动到容器 div 的右侧flex: 1，但第二个 div 没有移动到任何地方。然后尝试也给容器 divjustifyContent: "space-between"并且也没有做任何事情。所以问题是如何将第二个 div 设置到容器 div 的右侧。

container: {
   justifyContent: "space-between"
},
first: {
   display: "inline-flex",
   flex: 1,
},
second: {
   display: "inline-flex"
},

任何想法如何将第二个 div 移动到容器 div 的右侧？

标签： cssflexboxmaterial-ui

Answer 1

需要display:'flex'在container课堂上使用。justify-content适用于柔性显示器。

container:{
  display:'flex'
}

然后first和seconddiv 将占用所需的空间/宽度，并将并排放置。
将它们分开使用或在课堂justifyContent:'space-between'上等间距使用。此外，您可以单独指定和div 的宽度。justifyContent:'space-around'containerfirstsecond