我需要帮助安排div职位

Question

示例：https://jsfiddle.net/La9jd2y7/

.one {
    height: 50px;
    width: 200px;
    background-color: #F60;
    float: left;
    text-align: center;
}
.two {
    height: 25px;
    width: 25px;
    background-color: #6F0;
    float: left;
    text-align: center;
}
.three {
    height: 25px;
    width: 25px;
    background-color: #F20;
    float: left;
    text-align: center;
}
.four {
    height: 50px;
    width: 200px;
    background-color: #C90;
    float: left;
    text-align: center;
}

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>

我需要div 3到div 2以下，所以div 4的左边是2和3。

结果：http://i.imgur.com/N8VZ4HO.png

感谢。

Answer 1

试试这个：

.one {
    height: 50px;
    width: 200px;
    background-color: #F60;
    float: left;
    text-align: center;
}
.two {
    height: 50px;
    width: 25px;
    background-color: #6F0;
    float: left;
    text-align: center;
}
.two >div {
    height: 25px;
}
.four {
    height: 50px;
    width: 200px;
    background-color: #C90;
    float: left;
    text-align: center;
}

<div class="one">1</div>
<div class="two">
<div>2</div>
<div>3</div>
</div>
<div class="four">4</div>

因此，正如您所注意到我已更改HTML以将2和3放在.two内。这样你有3列，2和3在中间列内。不需要4列。

Answer 2

这是Demo HTML：

const_cast

CSS：

<div class="one">1</div>
<div class="box">
<div class="two">2</div>
<div class="three">3</div>
</div>
<div class="four">4</div>

https://jsfiddle.net/La9jd2y7/3/

Answer 3

试试这个：

.three {
  height: 25px;
  width: 25px;
  background-color: #F20;
  float: left;
  text-align: center;
  margin-top: 25px;
  margin-left: -25px;
}

DEMO

Answer 4

＆＃13;

＆＃13;

.one {
    height: 50px;
    width: 200px;
    background-color: #F60;
    float: left;
    text-align: center;
}
.two {
    height: 25px;
    width: 25px;
    background-color: #6F0;
    float: left;
    text-align: center;
}
.three {
    height: 25px;
    width: 25px;
    background-color: #F20;
    float: left;
    text-align: center;    
}
.four {
    height: 50px;
    width: 200px;
    background-color: #C90;
    float: left;
    text-align: center;
}
.two+.three{
    margin-top: 25px;
    margin-left: -25px;
}

＆＃13;

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>

＆＃13;

＆＃13;

＆＃13;