當它有內容時div跳轉

Question

當我的項目中的div有內容時，它跳下來。取決於它移動的內容。我不想讓「dashboard-tile」div因其內容而移動。我怎麼做？ 我認爲問題出在下面的html和css中，我忘記了什麼或在這裏做錯了什麼？它發生在谷歌瀏覽器和Internet Explorer中。當所有的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

使用vertical-align: top您的div，以確保他們都以相同的方式對齊：

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

Jsfiddle

Answer 2

您需要添加vertical-align:top;作爲默認爲baseline爲inline-block的元素

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

Answer 3

一種方法可能是使用含有內.dashboard-tile內容block formatting context

.dashboard-tile { 
    overflow:hidden; 
} 

Answer 4

圍棋flexbox，這使.meters一個Flexbox的容器，控制.dashboard瓦的

檢查片段（全屏！）徵求意見：

.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> \t