¿Cómo alinear este lapso a la derecha del div?

151

Tengo el siguiente HTML:

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

con 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;
}

Si marca esto jsFiddle: http://jsfiddle.net/8JwhZ/

puede ver que el Nombre y la Fecha están unidos. ¿Hay alguna manera de que pueda obtener la fecha para alinear a la derecha? He intentado float: right;con el segundo, pero arruina el estilo y empuja la fecha fuera del div.

html css

— DaveDev
fuente

2

¿Eres capaz de modificar el HTML?

— Phrogz

3

Si desea que algo flote en relación con otro objeto, el flotante debe estar antes que el no flotante. La fecha debe ser antes del título y flotando a la derecha.

— Josh Kovach

246

Si puede modificar el 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
fuente

CSS se simplifica y se limpia correctamente: se deben agregar ambos. También el violín contiene una solución muy frágil: jsfiddle.net/8JwhZ/2090

— Risord

9

O si lo quieres en línea (lo hice)

— Mark

51

Trabajar con carrozas es un poco desordenado:

Esto como muchos otros trucos de diseño 'triviales' se pueden hacer con flexbox.

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

En 2017, creo que esta es la solución preferida (sobre flotante) si no tiene que admitir navegadores heredados: https://caniuse.com/#feat=flexbox

Compruebe fiddle cómo se comparan los diferentes usos del flotador con flexbox ("puede incluir algunas respuestas competitivas"): https://jsfiddle.net/b244s19k/25/ . Si todavía necesita quedarse con flotador, le recomiendo la tercera versión, por supuesto.

— Risord
fuente

Este es el que opté por usar, tenga en cuenta también establecer float: left;y float: right;en los tramos que contienen los elementos que desea espaciar.

— Ran Lottem

1

El mensaje central de esta respuesta es que "el flotador se considera dañino" y nunca debe usarlos (está bien, hay algunas excepciones raras). Entonces, ¿puedes aclarar por qué crees que es una buena idea?

— Risord

1

Pensé que floatse requería en los elementos internos porque pensé que está definido en el ejemplo de violín para ellos, pero #testDno está definido. ¡Culpa mía!

— Ran Lottem

25

Una solución alternativa a los flotadores es utilizar un posicionamiento absoluto:

.title {
  position: relative;
}

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

Ver también el violín .

— Philipp
fuente

5

Puede hacer esto sin modificar el 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
fuente

4

La solución usando flexbox sin 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;
}

Cuando usamos flex:1el primero , ocupa todo el espacio restante y mueve el segundo a la derecha. El violín con esta solución: https://jsfiddle.net/2k1vryn7/

Aquí https://jsfiddle.net/7wvx2uLp/3/ puede ver la diferencia entre dos enfoques de flexbox: flexbox with justify-content: space-betweeny flexbox with flex:1en el primero .

— hydro17
fuente