在保持基本結構的同時對齊div

Question

這是我的div結構

一個//頂層

三// 2 divs在中層並排

四個//下層

<div id="ONE">
  <div></div>
  <div><img src="logo.png"></div>
</div>

<div id "FIVE">
  <div id="TWO">
    <div></div>
    <div></div>
  </div>
  <div id="THREE">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<div id="FOUR">
  <div></div>
</div>

我的問題：如何在保持相同的頂部，中間和底部div設置的同時將TWO與THREE底部對齊。

我嘗試添加位置：relative; 到“五個”和position: absolute到“兩個”和“三個”。 但隨后“五個”與“一個”重疊

編輯： 小提琴

#ONE{
    width: 100px;
    height: 50px;
    background-color: #ff0000;
}
#FIVE{
    width: 100px;
    height: 50px;
    background-color: #cdb79e;
    position:relative;
}
#TWO {
    display: inline-block;
    background-color: #9e0b0f;
    position:relative;
    width: 50px;
    height: 10px;
    float: left;
}
#THREE{
    display: inline-block;
    background-color: #088da5;
    position:relative;
    width: 50px;
    height: 50px;
}

Answer 1

參見jsfiddle和display: table; 並display: table-cell;

#FIVE{
    display: table;
    width: 100px;
}
#TWO {
    display: table-cell;
    background-color: #900;

    width: 50%;
    height: 10px;
}
#THREE{
    display: table-cell;
    background-color: #08a;

    width: 50%;
    height: 50px;
}

https://jsfiddle.net/sw_double/pepjxL2c/

Answer 2

使用float屬性並應用適當的CSS。 有關更多信息，請參見此提琴 。

標記

<div id="ONE">
  <div style="background: none repeat scroll 0% 0% red; width: 50%; float: left; height: 100%;">&nbsp; DIV 1</div>
  <div style="width: 50%; float: left; background: none repeat scroll 0% 0% blue; height: 100%;">&nbsp; DIV 2</div>
</div>

<div id="FIVE">
  <div id="TWO">
    <div  style="width: 50%; float: left; background: none repeat scroll 0% 0% green; height: 100%;">&nbsp; DIV 3</div>
    <div  style="width: 50%; float: left; background: none repeat scroll 0% 0% yellow; height: 100%;">&nbsp; DIV 4</div>
  </div>
  <div id="THREE">
    <div style="width: 33.33%; float: left; background: none repeat scroll 0% 0% red; height: 100%;">&nbsp; DIV 5</div>
    <div style="width: 33.33%; float: left; background: none repeat scroll 0% 0% grey; height: 100%;">&nbsp; DIV 6</div>
    <div style="width: 33.33%; float: left; background: none repeat scroll 0% 0% pink; height: 100%;">&nbsp; DIV 7</div>
  </div>
</div>

<div id="FOUR">
  <div>&nbsp; DIV 8</div>
</div>

的CSS

#ONE{
    width: 500px;
    height: 60px;
    background-color: #ff0000;
    float:left;
}
#FIVE{
    width: 500px;
    height: 200px;
    background-color: #cdb79e;
    float:left;
}
#TWO {
    display: inline-block;
    background-color: #9e0b0f;
    width: 500px;
    height: 100px;
    float: left;
}
#THREE{
    display: inline-block;
    background-color: #088da5;
    width: 500px;
    height: 100px;
    float:left;
}
#FOUR{
    display: inline-block;
    background-color: #eeeeee;
    width: 500px;
    height: 50px;
    float:left;
}