Question

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

HTML：

<div class="meters">
    <div class="dashboard-tile">other content</div>
    <div class="dashboard-tile">content</div>
    <div class="dashboard-tile">content</div>
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
</div>

的CSS：

.meters {
    text-align: justify;
}

.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;
}

screenshot 1（问题）

screenshot 2（首选结果）

Answer 1

在你的div上使用for(int j=0; j<n; j++)以确保它们都以相同的方式对齐：

vertical-align: top

Jsfiddle

Answer 2

您需要添加.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; }，因为内联块元素的默认值为vertical-align:top;

baseline

Answer 3

一种方法可能是使用block formatting context

在.dashboard-tile中包含内容

.dashboard-tile {
    overflow:hidden;
}

Answer 4

Go FLEXBOX，使。米一个控制 .dashboard-tile 的Flexbox容器

检查摘要（全屏！）以获取评论：

.meters {
    display: flex;       /* add, make it a flexbox container */
    flex-flow: row wrap; /* add, default = row nowrap */
    justify-content: space-between; /* default = flex-start */

    /* text-align: justify; remove */
}

.dashboard-tile { 
    background-color: rgb(230,240,230);
    /* display: inline-block; remove */
    padding: 7px;
    height: 265px;
    width: 186px;
    /* position: relative; remove
    top: 0px;              remove
    left: 0px;             remove */
    margin-bottom: 14px;
}

<div class="meters">
    <div class="dashboard-tile">other content</div>
    <div class="dashboard-tile">content</div>
    <div class="dashboard-tile">content</div>
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
    <div class="dashboard-tile"></div><!--no content-->
</div>

div有内容

4 个答案: