Html div有内容时会跳转

当我的项目中的一个div包含内容时，它会跳下来。取决于它移动的内容。我不希望“dashboard tile”div因为其内容而移动。我该怎么做？ 我想问题出在下面的html和css中，我是忘记了什么还是做错了什么？谷歌浏览器和IE浏览器都会出现这种情况。当所有的div都有相同的内容时，它也会按照我想要的方式工作。（见截图2） 对我来说，解决这个问题很难，因为我不知道问题在哪里。这也让我很难在互联网上找到解决方案

Html:

（问题）

---

（首选结果）

在div上使用

垂直对齐：top

，以确保它们的对齐方式相同：

.dashboard-tile {
    background-color: rgb(230,240,230);
    display: inline-block;
    padding: 7px;
    height: 265px;
    width: 186px;
    position: relative;
    top: 0px;
    left: 0px;
    margin-bottom: 14px;
    vertical-align: top;
}

---

在div上使用

垂直对齐：top

，以确保它们的对齐方式相同：

.dashboard-tile {
    background-color: rgb(230,240,230);
    display: inline-block;
    padding: 7px;
    height: 265px;
    width: 186px;
    position: relative;
    top: 0px;
    left: 0px;
    margin-bottom: 14px;
    vertical-align: top;
}

---

您需要添加

垂直对齐：顶部作为内联块元素的默认值是
基线

   .dashboard-tile {
    background-color: rgb(230,240,230);
    display: inline-block;
    padding: 7px;
    height: 265px;
    width: 186px;
    position: relative;
    top: 0px;
    left: 0px;
    margin-bottom: 14px;
    vertical-align:top;
}

您需要添加
垂直对齐：顶部作为内联块元素的默认值是
基线

   .dashboard-tile {
    background-color: rgb(230,240,230);
    display: inline-block;
    padding: 7px;
    height: 265px;
    width: 186px;
    position: relative;
    top: 0px;
    left: 0px;
    margin-bottom: 14px;
    vertical-align:top;
}

一种方法可能是使用

一种方法可能是使用

转到FLEXBOX，使.meters成为控制仪表板磁贴的FLEXBOX容器

检查代码段（全屏！）以获取注释：


.meters{
显示：flex；/*添加，使其成为flexbox容器*/
灵活流程：行换行；/*添加，默认值=行nowrap*/
对齐内容：间距；/*默认值=灵活开始*/
/*文本对齐：对齐；删除*/
}
.仪表板磁贴{
背景色：rgb（230240230）；
/*显示：内联块；删除*/
填充：7px；
高度：265px；
宽度：186px；
/*位置：相对；移除
顶部：0px；卸下
左：0px；卸下*/
边缘底部：14px；
}

其他内容
内容
内容
转到FLEXBOX，制作一个控制仪表板磁贴的FLEXBOX容器

检查代码段（全屏！）以获取注释：


.meters{
显示：flex；/*添加，使其成为flexbox容器*/
灵活流程：行换行；/*添加，默认值=行nowrap*/
对齐内容：间距；/*默认值=灵活开始*/
/*文本对齐：对齐；删除*/
}
.仪表板磁贴{
背景色：rgb（230240230）；
/*显示：内联块；删除*/
填充：7px；
高度：265px；
宽度：186px；
/*位置：相对；移除
顶部：0px；卸下
左：0px；卸下*/
边缘底部：14px；
}

其他内容
内容
内容
溢出：隐藏和垂直对齐：顶部有什么区别？它似乎都解决了我的问题。溢出：隐藏和垂直对齐：顶部之间有什么区别？这似乎解决了我的问题。这使得所有的仪表板互动程序相互重叠，仪表板互动程序中的一些div被弄乱。检查了代码片段并清理了网页-IE11、Chrome、Firefox Standard和Developer Ed。给出相同的（您喜欢的）结果。也许IE Edge对Flexbox有不同的看法？无论如何，gaynorvader的代码似乎适合你，继续使用它，并将Flex'ing保存在黑暗的日子里……这使得所有的仪表板瓷砖相互重叠，仪表板瓷砖内部的一些div被弄乱。检查代码片段并清理网页-IE11、Chrome、Firefox Standard和Developer Ed。给出相同的（你喜欢的）结果。也许IE Edge对Flexbox有不同的看法？无论如何，gaynorvader的代码似乎适合你，用它来保存Flex'ing以适应黑暗的日子…溢出：隐藏和垂直对齐：顶部之间的区别是什么？它似乎都解决了我的问题。溢出：隐藏和垂直对齐：顶部之间有什么区别？似乎这两种方法都解决了我的问题。我不确定谁是第一个使用这种方法的人，你还是盖诺维德。溢出：隐藏和垂直对齐：顶部之间有什么区别？似乎这两种方法都解决了我的问题。我不确定谁是第一个使用这种方法的人，你还是盖诺维德。溢出：隐藏和垂直对齐：顶部之间有什么区别？看来这两个都解决了我的问题。
.dashboard-tile {
    overflow:hidden;
}