Html Div内联块垂直对齐？

当以大约220px的

宽度
运行时，是否有办法让蓝色方块正好位于红色方块下方（除了页边顶部：-100px；）

请注意，100px左右的单列“移动”模式按需要显示：红色、绿色、蓝色。）

尝试以下操作：添加
clear:both；浮动：左.d3
中的code>和
浮点：左在
.d1
中


.d1
{
宽度：100px；
高度：100px；
显示：内联块；
背景色：红色；
垂直对齐：顶部；
浮动：左；
}
.d2
{
宽度：100px；
高度：200px；
显示：内联块；
背景颜色：绿色；
垂直对齐：顶部；
}
.d3
{
宽度：100px；
高度：100px；
显示：内联块；
背景颜色：蓝色；
垂直对齐：顶部；
清除：两个；浮动：左；
}
尝试以下操作：添加
清除：两者皆有；浮动：左.d3
中的code>和
浮点：左在
.d1
中


.d1
{
宽度：100px；
高度：100px；
显示：内联块；
背景色：红色；
垂直对齐：顶部；
浮动：左；
}
.d2
{
宽度：100px；
高度：200px；
显示：内联块；
背景颜色：绿色；
垂直对齐：顶部；
}
.d3
{
宽度：100px；
高度：100px；
显示：内联块；
背景颜色：蓝色；
垂直对齐：顶部；
清除：两个；浮动：左；
}

试试这个

将所有div包装在一个父div中，并将
float:right
赋予
.d2


.wrapper{
宽度：100%；
最大宽度：200px；
}
.d1{
宽度：100px；
高度：100px；
显示：内联块；
背景色：红色；
垂直对齐：顶部；
浮动：左；
}
.d2{
宽度：100px；
高度：200px；
显示：内联块；
背景颜色：绿色；
垂直对齐：顶部；
浮动：对；
}
.d3{
宽度：100px；
高度：100px；
显示：内联块；
背景颜色：蓝色；
垂直对齐：顶部；
清除：左；
浮动：左；
}
@媒体屏幕和屏幕（最大宽度：201px）{
.d1、.d2、.d3{
浮动：无；
}
}

试试这个

将所有div包装在一个父div中，并将
float:right
赋予
.d2


.wrapper{
宽度：100%；
最大宽度：200px；
}
.d1{
宽度：100px；
高度：100px；
显示：内联块；
背景色：红色；
垂直对齐：顶部；
浮动：左；
}
.d2{
宽度：100px；
高度：200px；
显示：内联块；
背景颜色：绿色；
垂直对齐：顶部；
浮动：对；
}
.d3{
宽度：100px；
高度：100px；
显示：内联块；
背景颜色：蓝色；
垂直对齐：顶部；
清除：左；
浮动：左；
}
@媒体屏幕和屏幕（最大宽度：201px）{
.d1、.d2、.d3{
浮动：无；
}
}
如果您可以使用
表而不是DIV，那么下面是简单的代码


.d1{
宽度：100px；
高度：100px；
背景色：红色；
}
.d2{
宽度：100px；
高度：200px；
背景颜色：绿色；
}
.d3{
宽度：100px；
高度：100px；
背景颜色：蓝色；
}

红色
绿色
蓝色
如果您可以使用
表而不是DIV，那么下面是简单的代码


.d1{
宽度：100px；
高度：100px；
背景色：红色；
}
.d2{
宽度：100px；
高度：200px；
背景颜色：绿色；
}
.d3{
宽度：100px；
高度：100px；
背景颜色：蓝色；
}

红色
绿色
蓝色
为什么您的CSS属性带有首字母大写？请清楚解释question@RahulDesai抱歉-这台自动大写的iPad只需免费编码。为什么你的CSS属性有首字母大写？请解释清楚question@RahulDesai抱歉-只需从这款iPad免费编码即可自动资本化。谢谢，当宽度在附近时，JSFIDLE不起作用210px@user1946932然后，您可以创建一个父div并将它们放入其中，并指定
max width:200px到父分区。使用
清除：左
而不是
清除：两者max width:200px到父分区。使用
清除：左
而不是
清除：两者.d1 {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: red;
    vertical-align: top;
}

.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