如何将元素对齐到div框的右侧？[副本]

Question

<div id="foo">
    <div id="tree">Some Text here</div>
</div>

#foo {
    display: block;
    width: 500px;
    height: 500px;
    background: #5e5e5e;
}

#tree {
    width: 100px;
    height: 30px;
    background: #000000;
}

我需要树放置在右上角的Foo。

Answer 1

给float：右转到#tree。

null

#foo {
    display: block;
    width: 500px;
    height: 500px;
    background: #5e5e5e;
}

#tree {
	float: right;
    width: 100px;
    height: 30px;
    background: #000000;
}

html lang-html prettyprint-override">  <div id="foo">
		<div id="tree">Some Text here</div>
	</div>

Answer 2

有几种方法可以实现这一点。一种方法是在树中添加一个自动的左边距：

margin-left: auto;

另一个选择是将float:right；应用于树，这可能导致也可能不会导致您需要的内容流。

最后，老实说，我的建议是只使用FlexBox。

null

#foo {
    display: block;
    width: 500px;
    height: 500px;
    background: #5e5e5e;
}

#tree {
    width: 100px;
    height: 30px;
    background: #000000;
    margin-left: auto;
}

<div id="foo">
    <div id="tree">Some Text here</div>
</div>