如何将这个跨度alignment的权利？

我有以下的HTML：

<div class="title"> <span>Cumulative performance</span> <span>20/02/2011</span> </div> 

与这个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; } 

如果你检查这个jsFiddle： http : //jsfiddle.net/8JwhZ/

您可以看到名称和date被粘在一起。 有没有一种方法可以让date与右侧alignment？ 我试过float: right; 在第二个<span>但是它把风格搞砸了，并把封闭的div之外的date推出来

Answer 1

如果你可以修改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 } 

Answer 2

与浮游物工作有点混乱。 这与许多其他“小事”的布局技巧可以用flexbox来完成。

  div.container { display: flex; justify-content: space-between; } 

在2017年，如果您不需要支持传统浏览器，我认为这是首选的解决scheme（超过浮动）： https ： //caniuse.com/#feat=flexbox

检查小提琴如何不同的浮动用法比较flexbox（“可能包括一些竞争的答案”）： https ：//jsfiddle.net/b244s19k/25/。 如果你仍然需要坚持浮动我build议第三版的课程。

Answer 3

另一种解决方法是使用绝对定位：

 .title { position: relative; } .title span:last-child { position: absolute; right: 6px; /* must be equal to parent's right padding */ } 

另见小提琴 。

Answer 4

你可以在不修改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 }