Дно свойства находится в верхней части. Зачем?

Question

У меня есть зеленый div и один красный div внутри div-класса «nav». И я хочу поставить красный 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 и относительно на родителя будет делать это:

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

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

Answer 2

<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;} --that изменит все дивы на странице и, возможно, создать кучу головной боли, когда вы создавая все остальное.

Лучше всего было бы сделать это следующим образом:

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

Таким образом, вы знаете, что только изменения те, которые вас касаются.