将div放在右下角

Question

考虑以下HTML：

<div class="wrapper">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

使用这个CSS：

.wrapper {
    width: 800px;
    height: 300px;
    background-color: red;
}
.a {
    width: 400px;
    height: 120px;
    background-color: green;
}
.b {
    width: 100px;
    height: 150px;
    background-color: blue;
}
.c {
    width: 100px;
    height: 150px;
    background-color: lightblue;
}

我现在需要在左上角放置一个b，在右侧放置c放在顶部。

我的第一个解决方案就是这样做：

.a{
float: left;
}
.b{
float:right;
}
.c{
float:right;
}

问题是现在c是b的左边，但需要低于它... 有没有解决问题的方法，即使a有不同的高度？

Answer 1

试试这个

<div class="wrapper">
    <div class="a"></div>
    <div class="rightside">
        <div class="b"></div>
        <div class="c"></div>
    <div>
    <div class="clear"></div>
</div>

用css：

.a {float: left}
.rightside {float: right}
.clear {clear: both}

Answer 2

你也可以试试这个：

<div class="wrapper">
    <div class="a"></div>
    <div class="b"></div>
    <div style="clear: both;"></div>
    <div class="c"></div>
</div>

Answer 3

使用CSS + HTML解决方案

您可以将b和c放入包含div（#container），然后float:right #container。

HTML：

<div class="wrapper">
    <div class="a"></div>
    <div id="container">
        <div class="b"></div>
        <div class="c"></div>
    </div>
</div>

CSS：

.a {
    float: left;
}

#container {
    float: right;
}

JS Fiddle Example

<小时/> <小时/>

仅使用CSS解决方案

如果您无法更改页面的HTML（或者不愿意更改），可以使用纯CSS通过绝对定位来完成。

CSS：

.wrapper {
    position: relative;
}

.a {
    position: absolute;
    top: 0;
    left: 0;
}

.b {
    position: absolute;
    right:0;
    top: 0;
}

.c {
    position: absolute;
    right:0;
    top: 150px; /* or bottom:0 */
}

JS Fiddle Example (using position:absolute)