Question

这是我的div结构

ONE //顶级

两个三个// 2 div在中间层并排

四个//底层

<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设置。

我尝试添加位置：亲属;到＆＃34;五，＆＃34;和position: absolute到＆＃34; TWO＆＃34;和＆＃34;三＆＃34;。但接着＆＃34;五，＆＃34;重叠＆＃34; ONE＆＃34;

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

在保持基本结构

2 个答案: