问题描述
我有一个
<div class="child" style="float:right">无视家长?<div>另一个孩子
我有一个
<div class="child" style="float:right">无视家长?<div>另一个孩子
父母有
.parent {显示:弹性;}
对于我的第一个孩子,我只想将项目向右浮动.
我的其他 div 遵循父级设置的 flex 规则.
这有可能吗?
如果没有,我如何在 flex 下做一个 float: right
?
flex container 内不能使用 float
原因是 float 属性不适用于弹性级别的框,正如您在此处看到的Fiddle
.
因此,如果您想将 child
元素定位在 parent
元素的右侧,您可以使用 margin-left: auto
但现在使用 child
元素也会将其他 div
推到右边,正如你在这里看到的 小提琴
.
你现在可以做的是改变元素的顺序并在 child
元素上设置 order: 2
这样它就不会影响第二个 div
.parent {显示:弹性;}.孩子 {左边距:自动;订单:2;}
<div class="child">忽略父级?</div><div>另一个孩子</div>
I have a
<div class="parent">
<div class="child" style="float:right"> Ignore parent? </div>
<div> another child </div>
</div>
The parent has
.parent {
display: flex;
}
For my first child, I want to simply float the item to the right.
And my other divs to follow the flex rule set by the parent.
Is this something possible?
If not, how do I do a float: right
under flex?
You can't use float
inside flex container and the reason is that float property does not apply to flex-level boxes as you can see here Fiddle
.
So if you want to position child
element to right of parent
element you can use margin-left: auto
but now child
element will also push other div
to the right as you can see here Fiddle
.
What you can do now is change order of elements and set order: 2
on child
element so it doesn't affect second div
.parent {
display: flex;
}
.child {
margin-left: auto;
order: 2;
}
<div class="parent">
<div class="child">Ignore parent?</div>
<div>another child</div>
</div>
这篇关于使弹性项目向右浮动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!