[英]Flex-box display children divs side by side
I have a .content-container
div
that is set to display: flex
, and children divs ( .message-body, .message-action
) that I want to show side by side, with the .message-action
div floating to the right. 我有一个
.content-container
div
设置为display: flex
和我要并排display: flex
子div( .message-body, .message-action
) .message-action
div浮动在右侧。
Here is what I am working off of: https://codepen.io/anon/pen/ZRZKdZ 这是我正在做的事情: https : //codepen.io/anon/pen/ZRZKdZ
As you can see, the .message-action
div seems to be below the .message-body
div. 如您所见,
.message-action
div似乎位于.message-body
div之下。
You need to use flex-direction:row
and not column
on the container if you want them side-by-side ( read https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more on this property ). 如果要并排使用,则需要使用
flex-direction:row
而不是容器上的column
( 请阅读https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction有关此属性的更多信息 )。
( also remove the float:right
) ( 同时删除
float:right
)
Updated pen: https://codepen.io/anon/pen/qKwjNa 更新的笔: https : //codepen.io/anon/pen/qKwjNa
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.