div靠下 - html同一行靠左靠右




如何將此跨度對齊到div的右側? (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 }

我有以下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/ : http://jsfiddle.net/8JwhZ/

你可以看到Name&Date被粘在一起。 有沒有一種方法可以讓日期與右側對齊? 我試過float: right; 在第二個<span>但是它將樣式搞砸了,並且將包含div的日期推出


使用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;
}

當我們在第一個<span>上使用flex:1時,它將佔用整個剩餘空間並將第二個<span>移動到右側。 小提琴與此解決方案: https://jsfiddle.net/2k1vryn7/https://jsfiddle.net/2k1vryn7/

您可以在https://jsfiddle.net/7wvx2uLp/3/中看到兩種柔性箱方法之間的區別flex:1第一個<span> flexbox與justify-content: space-between和flexbox與flex:1


另一種解決方法是使用絕對定位:

.title {
  position: relative;
}

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

另見小提琴






css