Html 为什么当我把一些内容放在这些div的旁边时，这些div会表现得很奇怪？

我想让我的舞伴们像这样表演。出于某种原因，当我把一张图片放在其中一张里面时，它开始表现得有点疯狂，我似乎不明白为什么。我做错了什么

这就是它表现出的奇怪

HTML

---

您的CSS有一个打字错误，这会阻止正确解析CSS规则：

.div2 img{
    height: auto;
    width: 80%;
}
}

应该是：

.div2 img{
    height: auto;
    width: 80%;
}

另外，如果您希望div与顶部对齐，请将它们都设置为

垂直对齐：顶部

下面是一个完整的实时示例：

.divMain{
高度：500px；
宽度：100%；
边框：2件纯黑；
}
.第2分部{
显示：内联块；
高度：200px；
宽度：40%；
边框：2倍纯红；
}
.第2分部{
高度：自动；
宽度：80%；
垂直对齐：顶部；
}
.第3分部{
显示：内联块；
高度：200px；
宽度：45%；
边框：2件纯蓝；
垂直对齐：顶部；
}
@仅介质屏幕和（最大宽度：500px）{
.第2分部{
背景色：红色；
}
.第3分部{
背景颜色：蓝色；
}
}
}

一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字

奇怪是什么意思？你能提供更多的细节吗@所以我确实犯了那个错误。谢谢你的垂直对齐。当宽度没有调整时，两个div会上下移动，这有什么原因吗？@Shocker_33 div的对齐方式很奇怪，因为默认值

垂直对齐

是

基线

，它对齐div内文本的底部（内联内容），而不是div本身。老实说，直到我做了一些研究，我才真正知道。

.div2 img{
    height: auto;
    width: 80%;
}
}

.div2 img{
    height: auto;
    width: 80%;
}