CSS：將「float：right」元素移到頂部（與列表的第一個元素對齊）

我有一系列元素，最後一個元素有css「float：left」。CSS：將「float：right」元素移到頂部（與列表的第一個元素對齊）

我想顯示它在第一個元素的相同高度，而不是在列表的底部。（我不能更改html代碼，所以它是列表中的最後一個）。

與此同時，我想保持在正確的位置。我怎樣才能讓它最好的CSS？

感謝

代碼：

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

來源

2010-04-23 aneuryzm

你可以發佈一些源代碼嗎？ – Kyle 2010-04-23 11:06:21

需要這個源代碼來解決問題 – 2010-04-23 11:08:13

我已經添加了代碼 – aneuryzm 2010-04-23 12:01:19

你有一個小錯誤，使其：

.field-field-artists { 

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

來源

2010-04-23 12:44:55

該死的，好的謝謝。我有2個問題：1）它是一個很好的解決方案爲IE瀏覽器？ 2）如果以前的字段內容發生變化，高度變化和上邊距需要更新，對嗎？所以......還有其他解決方案嗎？ – aneuryzm 2010-04-23 12:54:24

是的，如果尺寸改變，它會改變。爲了做到這一點（動態），你需要一些JavaScript我想。另一種選擇是將其他人放入一個div中，並將該組右側的最後一個浮動 - 但這改變了結構（如果你控制的話，我會考慮改變結構） – 2010-04-23 13:31:04

您可以在最後一個字段的權利和其他漂浮到左邊（假設有足夠的水平空間）或使用絕對定位或使用JavaScript重新排序塊;但由於這顯然是Drupal，你不能只重新配置字段權重嗎？

來源

2010-04-23 13:10:56 Tgr

CSS：將「float：right」元素移到頂部（與列表的第一個元素對齊）

回答

相關問題