在保持基本结构的同时对齐 div答案

【问题标题】：Align divs while keeping the basic structure在保持基本结构的同时对齐 div
【发布时间】：2015-04-23 11:54:38
【问题描述】：

这是我的 div 结构

ONE //顶层

两个三个 // 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 设置。

我尝试添加位置 :relative;到“五”和position: absolute 到“二”和“三”。但随后“五”与“一”重叠

编辑： 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;
}

【问题讨论】：

一些视觉表现或小提琴将帮助每个人快速理解问题。
请贴出你尝试过的 CSS
你应该和display: table和display: table-cell一起玩。
@Thangadurai：这是一个小提琴：jsfiddle.net/j3e69kz4
@Salketer：请看jsfiddle.net/j3e69kz4

标签： html css

【解决方案1】：

使用 display: table; 和 display: table-cell; 查看 jsfiddle

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

【讨论】：

【解决方案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;
}

【讨论】：

如果您只是想放置链接，您可以在评论中非常困难地这样做，以质疑为什么要写一个独立的答案？？？？