CSS: mueve un elemento "float: right" a la parte superior (para alinearse con el primer elemento de la lista)

Tengo una secuencia de elementos y el último tiene css "float: left".CSS: mueve un elemento "float: right" a la parte superior (para alinearse con el primer elemento de la lista)

Me gustaría mostrarlo a la misma altura del primer elemento y no en la parte inferior de la lista. (No puedo cambiar el código html, así que es el último en la lista).

Al mismo tiempo, me gustaría mantenerlo a la derecha. ¿Cómo puedo hacerlo con CSS?

gracias

Código:

<div class="field field-type-text field-field-year"> 
    <div class="field-items"> 
      <div class="field-item odd"> 
         <div class="field-label-inline-first"> 
       Year:&nbsp;</div> 
        2009  </div> 
     </div> 
</div> 
<div class="field field-type-text field-field-where"> 
    <div class="field-items"> 
      <div class="field-item odd"> 
         <div class="field-label-inline-first"> 
       Where:&nbsp;</div> 
        Musée Rath, Geneva  </div> 
     </div> 
</div> 
<div class="field field-type-text field-field-when"> 
    <div class="field-items"> 
      <div class="field-item odd"> 
         <div class="field-label-inline-first"> 
       When:&nbsp;</div> 
        25.8 – 27.9.2009  </div> 
     </div> 
</div> 
<div class="field field-type-text field-field-editor"> 
    <div class="field-items"> 
      <div class="field-item odd"> 
         <div class="field-label-inline-first"> 
       Editor:&nbsp;</div> 
        Blabla Blabla  </div> 
     </div> 
</div> 
<div class="field field-type-text field-field-material"> 
    <div class="field-items"> 
      <div class="field-item odd"> 
         <div class="field-label-inline-first"> 
       Material/techniques:&nbsp;</div> 
        contemporary art installations  </div> 
     </div> 
</div> 
<div class="field field-type-text field-field-dimension"> 
    <div class="field-items"> 
      <div class="field-item odd"> 
         <div class="field-label-inline-first"> 
       Dimension:&nbsp;</div> 
        2 floors in a neoclassical building  </div> 
     </div> 
</div> 
<div class="field field-type-text field-field-artists"> 
    <div class="field-items"> 
      <div class="field-item odd"> 
         <div class="field-label-inline-first"> 
       Artists:&nbsp;</div> 
        Blablablabla balbalbalbalba 
     </div> 
     </div> 
</div> 


    .field-field-year, .field-field-where, .field-field-when, .field-field-editor, .field-field-material, .field-field-dimension { 
     width:300px; 
    } 



    .field-field-artists { 

     width:400px; 
     float:right; 
     clear:right; 
     top-margin: -200px; 
    }

Fuente

2010-04-23 aneuryzm

¿Puedes subir un código fuente? – Kyle

necesito el código fuente para resolver el problema –

He agregado el código – aneuryzm

usted tiene un pequeño error, que sea:

.field-field-artists { 

     width:400px; 
     float:right; 
     clear:right; 
     margin-top: -200px; 
    }

Fuente

2010-04-23 12:44:55

maldición, está bien, gracias. Tengo 2 preguntas: 1) ¿es una buena solución para IE? 2) si el contenido de los campos anteriores cambia, la altura cambia y el margen superior necesita ser actualizado, ¿verdad? Entonces ... ¿hay otra solución? – aneuryzm

Sí, cambiará si el tamaño cambia. Para hacer esto mejor (dinámico), necesitarías algo de javascript, creo. La otra opción es poner los otros dentro de un div, y flotar el último a la derecha de ese grupo, pero eso cambia la estructura (vale si controlas eso, yo pensaría) –

Usted podría flotar el último campo de la derecha y los otros hacia la izquierda (suponiendo que hay suficiente espacio horizontal) o use un posicionamiento absoluto o reordene los bloques con javascript; pero dado que esto aparentemente es Drupal, ¿no puedes simplemente reconfigurar los pesos de campo?

Fuente

2010-04-23 13:10:56 Tgr

CSS: mueve un elemento "float: right" a la parte superior (para alinearse con el primer elemento de la lista)

Respuesta

Cuestiones relacionadas