Question

我在div类“nav”中有绿色div和一个红色div。我想把红色div放在底部。但它不起作用：

http://jsfiddle.net/washington_guedes/1kdqwzvv/

HTML：

<div class="bar">
    <div class="green"></div>
    <div class="green"></div>
    <div class="green"></div>
    <div class="red"></div>
</div>

的CSS：

div{
    display: inline-block;
}
.bar{
    height: 70px;
    width: 100%;
    background-color: #ddf;
}
.green{
    height: 100%;
    width: 50px;
    margin: 0 10px 0 10px;
    background-color: #afa;
}
.red{
    float: right;
    bottom: 0;
    height: 10px;
    width: 10px;
    background-color: #f77;
}

Answer 1

<div class="bar">
    <div class="green"></div>
    <div class="green"></div>
    <div class="green"></div>
<br/>
    <div class="red"></div>
</div>

并以负余量向上移动。只是一个不同的选择：

Demo

在旁注 - 我不建议设置div{display:inline-block;} - 这会改变您网页上的所有div，并且可能会在您出现问题时产生一些令人头疼的问题;重新创造其余的。

更好的方法是这样做：

.bar, .green, .red{
    display:inline-block;
}

这样你知道你只会改变你所关注的那些。

Answer 2

我认为对父母的红色div和亲戚的绝对定位会这样做：

＆＃13;

div {
    display: inline-block;
}
.bar {
    height: 70px;
    width: 100%;
    background-color: #ddf;
    position:relative;
}
.green {
    height: 100%;
    width: 50px;
    margin: 0 10px 0 10px;
    background-color: #afa;
}
.red {
    position: absolute;
    bottom: 0;
    right:0;
    height: 10px;
    width: 10px;
    background-color: #f77;
}

＆＃13;

<div class="bar">
    <div class="green"></div>
    <div class="green"></div>
    <div class="green"></div>
    <div class="red"></div>
</div>

＆＃13;

房地产底部是当前的顶部。为什么？

2 个答案: