CSS:将“float:right”元素移动到顶部(与列表的第一个元素对齐)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2697976/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: move a "float:right" element to top (to align with the first element of the list)
提问by aneuryzm
I've a sequence of elements and the last one has css "float:left".
我有一系列元素,最后一个有 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).
我想在第一个元素的相同高度而不是在列表底部显示它。(我无法更改 html 代码,因此它是列表中的最后一个)。
At the same time, I would like to keep it on the right. How can I make it wich CSS ?
同时,我想把它放在右边。我怎样才能让它成为 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: </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: </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: </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: </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: </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: </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: </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;
}
回答by Mark Schultheiss
you have a small error, make it:
你有一个小错误,让它:
.field-field-artists {
width:400px;
float:right;
clear:right;
margin-top: -200px;
}
回答by Tgr
You could float the last field to the right and the others to the left (assuming there is enough horizontal space) or use absolute positioning or reorder the blocks with javascript; but since this is apparently Drupal, can't you just reconfigure the field weights?
您可以将最后一个字段向右浮动,将其他字段向左浮动(假设有足够的水平空间)或使用绝对定位或使用 javascript 重新排序块;但是由于这显然是 Drupal,您不能重新配置字段权重吗?