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, <span>
mas estraga o estilo e empurra a data para fora da div que o acompanha
Respostas:
Se você pode modificar o HTML: http://jsfiddle.net/8JwhZ/3/
fonte
<span style="float: right">
Trabalhar com carros alegóricos é um pouco confuso:
Esse tantos outros truques de layout 'triviais' podem ser feitos com o flexbox.
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.
fonte
float: left;
efloat: right;
nos intervalos que contêm os elementos que você deseja espaçar.float
era necessário nos elementos internos porque pensei que fosse definido no exemplo de violino para eles, mas por#testD
não ser definido. Foi mal!Uma solução alternativa para carros alegóricos é usar o posicionamento absoluto:
Veja também o violino .
fonte
Você pode fazer isso sem modificar o html. http://jsfiddle.net/8JwhZ/1085/
fonte
A solução usando flexbox sem
justify-content: space-between
.Quando usamos
flex:1
o primeiro<span>
, ele ocupa todo o espaço restante e move o segundo<span>
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-between
e flexbox withflex:1
na primeira<span>
.fonte