2010-04-23 3 views
6

J'ai une séquence d'éléments et le dernier a css "float: left".CSS: déplace un élément "float: right" vers le haut (pour l'aligner avec le premier élément de la liste)

Je voudrais l'afficher à la même hauteur du premier élément et non au bas de la liste. (Je ne peux pas changer le code html, donc c'est le dernier dans la liste).

Dans le même temps, je voudrais le garder sur la droite. Comment puis-je en faire quel CSS?

grâce

code:

<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

Pouvez-vous poster du code source? – Kyle

+0

besoin de code source pour résoudre ce problème –

+0

J'ai ajouté le code – aneuryzm

Répondre

7

vous avez une petite erreur, faire:

.field-field-artists { 

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

putain, ok merci. J'ai 2 questions: 1) est-ce une bonne solution pour IE? 2) si le contenu des champs précédents change, la hauteur change et la marge supérieure doit être mise à jour, n'est-ce pas? Alors ... y a-t-il une autre solution? – aneuryzm

+0

Oui, cela va changer si la taille change. Afin de faire cela mieux (dynamique), vous auriez besoin de javascript, je pense. L'autre option consiste à placer les autres dans un div, et à faire flotter le dernier sur la droite de ce groupe - mais cela change la structure (ok si vous contrôlez que je pense) –

2

Vous pouvez flotter le dernier champ à droite et les autres à la gauche (en supposant qu'il y ait assez d'espace horizontal) ou utiliser le positionnement absolu ou réorganiser les blocs avec javascript; mais puisque c'est apparemment Drupal, ne pouvez-vous pas simplement reconfigurer les poids de champ?

Questions connexes