css - float&对齐到元素的底部

时间:2014-02-09 14:07:37

标签: css css3 css-float vertical-alignment

如何同时对齐:float:right旁边的B & C元素element A,以及align底部的element B element A }和element C到顶部:

当我将浮动添加到elements B & C时,这两个元素与element A的顶部对齐,我想要的内容显示在下一张图片上:

float & alignement

PS: element A没有固定的尺寸。

3 个答案:

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