Como alinhar esse intervalo à direita da div?

151

Eu tenho o seguinte HTML:

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

com este 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;
}

Se você verificar este jsFiddle: http://jsfiddle.net/8JwhZ/

você pode ver que o nome e a data estão juntos. Existe uma maneira de conseguir que a data se alinhe à direita? Eu tentei float: right;no segundo, mas estraga o estilo e empurra a data para fora da div que o acompanha

html css

— DaveDev
fonte

2

Você é capaz de modificar o HTML?

— Phrogz

3

Se você deseja que algo flutue em relação a outro objeto, o flutuador precisa estar antes do não flutuante. A data deve ser anterior ao título e flutuante à direita.

— Josh Kovach

246

Se você pode modificar o 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 }

— Phrogz
fonte

CSS é simplificado e limpo: ambos devem ser adicionados. Também o violino contém uma solução muito frágil: jsfiddle.net/8JwhZ/2090

— Risord 14/11/19

9

Ou se você quer que ele inline (eu fiz)

— Mark

51

Trabalhar com carros alegóricos é um pouco confuso:

Esse tantos outros truques de layout 'triviais' podem ser feitos com o flexbox.

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

Em 2017, acho que essa é a solução preferida (over float) se você não precisar oferecer suporte a navegadores herdados: https://caniuse.com/#feat=flexbox

Verifique como o uso de flutuadores diferentes se compara ao flexbox ("pode incluir algumas respostas concorrentes"): https://jsfiddle.net/b244s19k/25/ . Se você ainda precisa usar o float, recomendo a terceira versão, é claro.

— Risord
fonte

Este é o que eu optei por usar, lembre-se de também definir float: left;e float: right;nos intervalos que contêm os elementos que você deseja espaçar.

— Ran Lottem

1

A principal mensagem desta resposta é que "float são considerados prejudiciais" e você nunca deve usá-las (ok, com certeza existem algumas raras exceções). Então, você pode esclarecer por que acha que é uma boa ideia?

— Risord

1

Eu pensei que floatera necessário nos elementos internos porque pensei que fosse definido no exemplo de violino para eles, mas por #testDnão ser definido. Foi mal!

— Ran Lottem

25

Uma solução alternativa para carros alegóricos é usar o posicionamento absoluto:

.title {
  position: relative;
}

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

Veja também o violino .

— Philipp
fonte

5

Você pode fazer isso sem modificar o 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 }

— Kerel
fonte

4

A solução usando flexbox sem 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;
}

Quando usamos flex:1o primeiro , ele ocupa todo o espaço restante e move o segundo para a direita. O violino com esta solução: https://jsfiddle.net/2k1vryn7/

Aqui https://jsfiddle.net/7wvx2uLp/3/, você pode ver a diferença entre duas abordagens flexbox: flexbox with justify-content: space-betweene flexbox with flex:1na primeira .

— hydro17
fonte