¿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, <span>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

Respuestas:

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)<span style="float: right">
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 <span>, ocupa todo el espacio restante y mueve el segundo <span>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 <span>.

hydro17
fuente