如何将此跨度与div的右侧对齐？

Question

我有以下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/

你可以看到名字＆amp;日期被困在一起。有没有办法可以让日期与右边对齐？我在第二个float: right;上尝试了<span>，但它会破坏样式，并将日期推到封闭的div之外

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年，如果您不必支持旧版浏览器，我认为这是首选解决方案（浮动版）：https://caniuse.com/#feat=flexbox

检查不同的浮动用法与flexbox的比较（“可能包含一些相互竞争的答案”）：https://jsfiddle.net/b244s19k/25/。如果你仍然需要坚持使用浮标我当然推荐第三版。

Answer 3

浮点数的另一种解决方案是使用绝对定位：

.title {
  position: relative;
}

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

另见the fiddle。

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 }

Answer 5

使用不带justify-content: space-between的flexbox的解决方案。

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

.title {
  display: flex;
}

span:first-of-type {
  flex: 1;
}

当我们在第一个flex:1上使用<span>时，它会占用整个剩余空间并将第二个<span>移到右侧。这个解决方案的小提琴：https://jsfiddle.net/2k1vryn7/

在这里https://jsfiddle.net/7wvx2uLp/3/您可以看到两个弹性箱方法之间的区别：第一个justify-content: space-between的{​​{1}}的弹性箱和flex:1的弹性箱。