gpt4 book ai didi

html - Flex 以第一个 child 为中心,第二个 child 在最后

转载 作者:太空宇宙 更新时间:2023-11-03 22:45:37 27 4
gpt4 key购买 nike

怎么推 .right一直向右,同时保持 .centred在中心? (它不需要使用 flex,但我需要在移动 View 上保持 .centred 高于 .right)

https://codepen.io/anon/pen/rjZLOv

  <div class="flex">
<div class="centred">
<div class="a">asdfasdf</div>
<div class="b">asdfasdf</div>
</div>
<div class="right">asdfasfad</div>
</div>


.flex {
display: flex;
align-items: center;
justify-content: center;
}

.centred {
justify-content: center;
}

.right {
justify-content: flex-end;
}

最佳答案

您可以制作.centred inline-block并使用 text-align: center;在父节点上使其居中,然后 float .right向右。

.container  {
width: 1024px;
margin: auto;
text-align: center;
}

.centred {
display: inline-block;
}

.right {
float: right;
}
<div class="container">
<div class="centred">
<div class="a">asdfasdf</div>
<div class="b">asdfasdf</div>
</div>
<div class="right">asdfasfad</div>
</div>

关于html - Flex 以第一个 child 为中心,第二个 child 在最后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42100318/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com