Html 如何将此跨度与 div 的右侧对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5067279/
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
How to align this span to the right of the div?
提问by DaveDev
I have the following HTML:
我有以下 HTML：
<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>
with this CSS:
使用这个 CSS：
.title
{
display: block;
border-top: 4px solid #a7a59b;
background-color: #f6e9d9;
height: 22px;
line-height: 22px;
padding: 4px 6px;
font-size: 14px;
color: #000;
margin-bottom: 13px;
clear:both;
}
If you check this jsFiddle: http://jsfiddle.net/8JwhZ/
如果你检查这个 jsFiddle：http: //jsfiddle.net/8JwhZ/
you can see that the Name & Date are stuck together. Is there a way that I can get the date to align to the right? I've tried float: right;on the second <span>but it screws up the style, and pushes the date outside of the enclosing div
您可以看到名称和日期粘在一起。有没有办法让日期向右对齐？我已经尝试float: right;过第二个，<span>但它搞砸了样式，并将日期推到了封闭的 div 之外
回答by Phrogz
If you can modify the HTML: http://jsfiddle.net/8JwhZ/3/
如果可以修改 HTML：http: //jsfiddle.net/8JwhZ/3/
<div class="title">
<span class="name">Cumulative performance</span>
<span class="date">20/02/2011</span>
</div>
.title .date { float:right }
.title .name { float:left }
回答by Risord
Working with floats is bit messy:
使用浮点数有点混乱：
This as many other 'trivial' layout tricks can be done with flexbox.
使用 flexbox 可以完成许多其他“琐碎”的布局技巧。
div.container {
display: flex;
justify-content: space-between;
}
In 2017 I think this is preferred solution (over float) if you don't have to support legacy browsers: https://caniuse.com/#feat=flexbox
在 2017 年，如果您不必支持旧浏览器，我认为这是首选解决方案（超过浮动）：https: //caniuse.com/#feat=flexbox
Check fiddle how different float usages compares to flexbox ("may include some competing answers"): https://jsfiddle.net/b244s19k/25/. If you still need to stick with float I recommended third version of course.
检查小提琴与 flexbox 相比如何不同的浮动用法（“可能包括一些相互竞争的答案”）：https://jsfiddle.net/b244s19k/25/ 。如果您仍然需要坚持使用浮动，我当然推荐第三个版本。
回答by Philipp
An alternative solution to floats is to use absolute positioning:
浮动的另一种解决方案是使用绝对定位：
.title {
position: relative;
}
.title span:last-child {
position: absolute;
right: 6px; /* must be equal to parent's right padding */
}
See also the fiddle.
另见小提琴。
回答by Kerel
You can do this without modifying the html. http://jsfiddle.net/8JwhZ/1085/
您可以在不修改 html 的情况下执行此操作。 http://jsfiddle.net/8JwhZ/1085/
<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>
.title span:nth-of-type(1) { float:right }
.title span:nth-of-type(2) { float:left }
回答by hydro17
The solution using flexbox without justify-content: space-between.
使用 flexbox 的解决方案，没有justify-content: space-between.
<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>
.title {
display: flex;
}
span:first-of-type {
flex: 1;
}
When we use flex:1on the first <span>, it takes up the entire remaining space and moves the second <span>to the right. The Fiddle with this solution: https://jsfiddle.net/2k1vryn7/
当我们flex:1在第一个上使用时<span>，它占用了整个剩余空间并将第二个<span>向右移动。使用此解决方案的小提琴：https: //jsfiddle.net/2k1vryn7/
Here https://jsfiddle.net/7wvx2uLp/3/you can see the difference between two flexbox approaches: flexbox with justify-content: space-betweenand flexbox with flex:1on the first <span>.
在这里https://jsfiddle.net/7wvx2uLp/3/你可以看到两种 flexbox 方法之间的区别： flexbox withjustify-content: space-between和 flexbox with flex:1on first <span>。
