Html 在 div 内对齐 2 跨度一个左侧和另一个右侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13903979/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align 2 span one left and the other right inside a div
提问by Max
Could anybody write the CSS fragment to do this?
有人可以编写 CSS 片段来做到这一点吗？
<div class="container">
<span class="left">Left</span><span class="right">Right</span>
</div>
Here's the CSS for .container:
这是 CSS 的.container：
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
}
Notice the position is absolute because it is "absolute positionated" on its containing element.
请注意，位置是绝对的，因为它在其包含元素上是“绝对定位的”。
I've alredy tried float:left/float:righton the two nested elements but nothing happens.
我已经在两个嵌套元素上尝试过float:left/float:right但没有任何反应。
回答by Kevin Bowersox
Set the elements to block, set a width and float them.
将元素设置为阻止，设置宽度并浮动它们。
.left{
display: block;
float:left;
width: 100px;
}
.right{
display: block;
float:right;
width: 100px;
}
Example: http://jsfiddle.net/LML2e/
回答by Horen
float: leftand float: rightwill work perfectly when you set a (relative or absolute) width for your .containerdiv
float: leftfloat: right当您为.containerdiv设置（相对或绝对）宽度时，它将完美地工作
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
width: 200px; //either absolute width
width: 100%; // or relative width
}
Side note:If you set the .containerto width: 100%you will get ugly scroll bars due to the margin. Just use the marginin the .leftand .rightclasses. See here.
旁注：如果您将 设置为.container，width: 100%由于margin. 只需margin在.left和.right类中使用 。见这里。
回答by Wouter J
You need to set a width in order to use float. If you want a width of 100% you can set .container { width: 100%; }or improve your code into something like:
您需要设置宽度才能使用float. 如果您想要 100% 的宽度，您可以将.container { width: 100%; }代码设置或改进为：
.container {
position:absolute;
bottom:5px;
left:5px;
right:5px;
}
