Div内联块垂直对齐？

Question

在大约220像素的width处运行https://jsfiddle.net/8vy5aefr/2/时，是否有办法让蓝色方块正好位于红色方块下方（除了margin-top：-100px;）？

  

请注意，大约100px的单列“移动”模式正在显示：红色，绿色，蓝色。）

.d1 {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: red;
    vertical-align: top;
}

Answer 1

试试这个：在clear:both; float:left;中添加.d3，在float:left;中添加.d1。

＆＃13;

＆＃13;

.d1
{
width:100px;
height:100px;
display: inline-block;
background-color:red;
vertical-align:top;
float:left;
}

.d2
{
width:100px;
height:200px;
display: inline-block;
background-color:green;
vertical-align:top;
}

.d3
{
width:100px;
height:100px;
display: inline-block;
background-color:blue;
vertical-align:top;
clear:both; float:left;
}

＆＃13;

<div class='d1'></div>
<div class='d2'></div>
<div class='d3'></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.d3{
    Width: 100px;
    Height: 100px;
    Display: inline-block;
    Background-color: blue;
    float: left;
    position: initial;
    clear: both;
}
.d2 {
    Width: 100px;
    Height: 200px;
    Display: inline-block;
    Background-color: green;

}

.d1 {
    Width: 100px;
    Height: 100px;
    Display: inline-block;
    Background-color: red;
    Vertical-align: top;
    float: left;
}

This will help you

Answer 3

试试这个，

在一个父div中包含所有div并将float:right提供给.d2

.wrapper {
  width:100%;
  max-width: 200px;
}
.d1 {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: red;
  vertical-align: top;
  float: left;
}
.d2 {
  width: 100px;
  height: 200px;
  display: inline-block;
  background-color: green;
  vertical-align: top;
  float: right;
}
.d3 {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: blue;
  vertical-align: top;
  clear: left;
  float: left;
}

@media screen and (max-width:201px){
  .d1,.d2,.d3{
    float:none;
  }
  
}

<div class="wrapper">
  <div class='d1'></div>
  <div class='d2'></div>
  <div class='d3'></div>
</div>

Answer 4

如果您使用$route['blabla'] = ['blabla/blabla'];而不是DIV，那么这里就是简单的代码。

table

.d1 {
  Width: 100px;
  Height: 100px;
  Background-color: red;
}
.d2 {
  Width: 100px;
  Height: 200px;
  Background-color: green;
}
.d3 {
  Width: 100px;
  Height: 100px;
  Background-color: blue;
}