如何同时对齐:float:right
旁边的B & C
元素element A
,以及align
底部的element B
element A
}和element C
到顶部:
当我将浮动添加到elements B & C
时,这两个元素与element A
的顶部对齐,我想要的内容显示在下一张图片上:
PS: element A
没有固定的尺寸。
答案 0 :(得分:1)
我不认为这可以用浮点数完成。我会尝试在A中嵌套div C和B,然后将它们绝对地放在A中。
这样的事情:
HTML
<div class="a">a
<div class="b">b</div>
<div class="c">c</div>
</div>
CSS
.a {
margin-left: 60px;
position: relative;
}
.b, .c {
position: absolute;
left: -60px;
}
.b {
bottom: 0;
}
.c {
top: 0;
}
请参阅jsfiddle示例。
答案 1 :(得分:1)
HTML
<div class="elementA">A
<div class="elementB">B</div>
<div class="elementC">C</div>
</div>
CSS
.elementA{
width: 400px;
height: 50%;
position: relative;
margin: 0 0 0 200px;
background-color: #000;
}
.elementB{
width: 200px;
height: 150px;
position: absolute;
top: 0;
left: -200px;
background-color: #eeeeee;
}
.elementC{
width: 200px;
height: 150px;
position: absolute;
bottom: 0;
left: -200px;
background-color: #dddddd;
}
您还可以以%为单位设置元素A的高度。 希望这就是你所追求的。 Fiddle Link
答案 2 :(得分:1)
如果您可以使用JQuery而不仅仅是CSS,这可以解决问题:
<强> example 强>
您可以动态计算每个元素的高度,然后向元素b添加上边距。
element b margin top = height of a - (height of b + height of c)
HTML
<div class="a">A</div>
<div class="left-column">
<div class="c">C</div><br />
<div class="b">B</div><br />
</div>
JQuery的
$(function(){
var ah = $('div.a').height();
var bh = $('div.b').height();
var ch = $('div.c').height();
$('div.b').css('margin-top',ah-bh-ch + 'px');
});
CSS
.left-column{
float: right;
}
.a{
float: right;
width: 300px;
height: 400px;
background-color: #7E0C89;
color: white;
font-size: 30px;
}
.b{
margin-right: 5px;
float: right;
width: 100px;
height: 100px;
background-color: #F4CBF7;
color: white;
font-size: 30px;
}
.c{
margin-right: 5px;
float: right;
width: 100px;
height: 100px;
background-color: #BF72E9;
color: white;
font-size: 30px;
}