css - 将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;
}

我现在需要将 a 放在左上角，将 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 的解决方案

您可以将bandc放在一个包含 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 小提琴示例

---

---

仅使用 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 示例（使用position:absolute）