CSS：将“float:right”元素移动到顶部（与列表的第一个元素对齐）答案

【问题标题】：CSS: move a "float:right" element to top (to align with the first element of the list)CSS：将“float:right”元素移动到顶部（与列表的第一个元素对齐）
【发布时间】：2010-04-23 11:04:07
【问题描述】：

我有一系列元素，最后一个有 css "float: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">
              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;
    }

【问题讨论】：

你能贴一些源代码吗？
需要源代码来解决问题

标签： css css-float

【解决方案1】：

你有一个小错误，补上：

.field-field-artists { 

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

【讨论】：

该死的，好的，谢谢。我有 2 个问题：1）它对 IE 来说是一个好的解决方案吗？ 2）如果之前字段的内容发生变化，高度变化和上边距需要更新，对吗？那么......还有其他解决方案吗？
是的，如果大小改变它会改变。为了更好地做到这一点（动态），我认为你需要一些 javascript。另一种选择是将其他人放在一个 div 中，并将最后一个浮动在该组的右侧 - 但这会改变结构（如果你控制我会这么想）

【解决方案2】：

您可以将最后一个字段浮动到右侧，将其他字段浮动到左侧（假设有足够的水平空间）或使用绝对定位或使用 javascript 重新排列块；但由于这显然是 Drupal，你不能只重新配置字段权重吗？

【讨论】：