如何将元素与div框的右侧对齐？

Question

如何将元素与div框的右侧对齐？

我的 div

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

我的CSS

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

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

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

Answer 1

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

margin-left: auto;

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

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

保证金示例

margin-left: auto;

#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>

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

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

弹性示例

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

#foo {
    display: flex;
    justify-content: flex-end;
    width: 500px;
    height: 500px;
    background: #5e5e5e;
}

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

Answer 2

将 float:right 赋予#tree。

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

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

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