CSS：移动“float：right”元素到顶部（与列表的第一个元素对齐） [英] CSS: move a "float:right" element to top (to align with the first element of the list)

问题描述

我有一系列元素，最后一个有cssfloat：left。

我想显示它在第一个元素，而不是列表的底部。 （我不能更改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> 
年份：& 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> 
其中：& nbsp;< / div> 
MuséeRath，日内瓦


< / 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>
编辑：& 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>
材料/技术：& nbsp;< / div>
当代艺术装置< / 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>
维度：& nbsp;< / div>
新古典主义建筑的2层楼层< / 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>
艺术家：& nbsp;< / div>
Blablablabla balbalbalbalba
< / div>
< / div>
< / div>


.field-field-year，.field-field-where，.field-field-when，.field-field-editor， field-dimension {
width：300px;
}



.field-field-artists {

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


解决方案

make it：

  .field-field-artists {
 
 width：400px; 
 float：right; 
 clear：right; 
 margin-top：-200px; 
} 
  

I've a sequence of elements and the last one has css "float:left".

I would like to display it at the same height of the first element and not on the bottom of the list. (I cannot change the html code, so it is the last in the list).

At the same time, I would like to keep it on the right. How can I make it wich CSS ?

thanks

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

解决方案

you have a small error, make it:

.field-field-artists { 

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

这篇关于CSS：移动“float：right”元素到顶部（与列表的第一个元素对齐）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！