2010-04-23 14 views
6

Ho una sequenza di elementi e l'ultimo ha css "float: left".CSS: spostare un elemento "float: right" in alto (per allineare con il primo elemento della lista)

Vorrei visualizzarlo alla stessa altezza del primo elemento e non in fondo all'elenco. (Non riesco a cambiare il codice html, quindi è l'ultimo della lista).

Allo stesso tempo, vorrei tenerlo a destra. Come posso farlo con i CSS?

grazie

Codice:

<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; 
    } 
+0

Puoi postare qualche codice sorgente? – Kyle

+0

ho bisogno del codice sorgente per risolvere il problema –

+0

Ho aggiunto il codice – aneuryzm

risposta

7

si dispone di un piccolo errore, lo rendono:

.field-field-artists { 

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

dannazione, ok grazie. Ho 2 domande: 1) è una buona soluzione per IE? 2) se il contenuto dei campi precedenti cambia, l'altezza cambia e il margine superiore deve essere aggiornato, giusto? Quindi ... c'è un'altra soluzione? – aneuryzm

+0

Sì, cambierà se le dimensioni cambiano. Per fare questo meglio (dinamico), avresti bisogno di qualche javascript, penso. L'altra opzione è quella di mettere gli altri all'interno di un div e di flottare l'ultimo a destra di quel gruppo, ma questo cambia la struttura (ok se controlli che io penserei) –

2

Si potrebbe galleggiare l'ultimo campo a destra e gli altri a sinistra (supponendo che ci sia abbastanza spazio orizzontale) o utilizzare il posizionamento assoluto o riordinare i blocchi con javascript; ma dal momento che questo è apparentemente Drupal, non puoi semplicemente riconfigurare i pesi del campo?

Problemi correlati