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

Question

這是我的div結構

ONE //頂級

TWO THREE在中等水平// 2的div並排

FOUR //底層

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

我的問題：我如何對齊TWO到THREE底部的水平，同時保持相同的頂部，中部和底部的div設置。

我試着添加position：relative;到「五」和position: absolute到「兩」和「三」。但隨後 「十二五」 是重疊的 「ONE」

編輯： Fiddle

#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

使用浮點性能和應用適當的CSS。有關更多信息，請參閱this fiddle。

標記

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