1
需要關於將div浮動到另一個上的幫助。我遇到了IE11的問題，因爲它會將其他div放在底部而不是橫向移動。基本上這整個問題都是div不正確的浮動，我只是認爲有人可能已經經歷過這一點。我無法在另一個頂部顯示div（IE11問題）
附加我的代碼片段。請懸停點擊我
#row1:hover {
\t top:0px;
\t z-index:1;
\t width:450px;
\t position:relative;
\t height:200px;
}
#row2 .row-skin {
\t position:relative;
\t top:2px;
}
#row3 .row-skin {
\t position:relative;
\t top:1px;
}
#row4 .row-skin {
position:relative;
\t top:1px;
}
.row-skin{
\t color: #FFF;
\t background-color: #FF00D8;
\t display: inline-block;
\t border-radius: 25px;
\t background: #003466;
\t padding: 16px;
\t width: 250px;
\t height: 145px;
\t margin: .50em 0; /* for separating portal-tiles vertically*/
\t overflow: hidden;
\t overflow-x: hidden; \t
\t transition: height .5s, width .5s;
\t transition-timing-function: ease-in-out;
\t z-index:0;
}
@media only screen and (min-width: 480px) {
\t .flex-grid{
\t \t -moz-column-count: 4;
\t \t -webkit-column-count: 4;
\t \t column-count: 4;
\t }
}
@media only screen and (min-width: 768px) {
\t .flex-grid {
\t \t -moz-column-count: 4;
\t \t -webkit-column-count: 4;
\t \t column-count: 4;
\t }
}
@media only screen and (min-width: 960px) {
\t .flex-grid {
\t \t -moz-column-count: 4;
\t \t -webkit-column-count: 4;
\t \t column-count: 4;
\t }
}<div class="flex-grid">
<div id= "row1" class="row-skin" >Click me </div>
<div id= "row2" class="row-skin" >Sample 2</div>
<div id= "row3" class="row-skin" >Sample3</div>
<div id= "row4" class="row-skin">Sample4</div>
<div id= "row5" class="row-skin" >Sample5</div>
<div id= "row6" class="row-skin" >Sample 6</div>
<div id= "row7" class="row-skin" >Sample 7</div>
<div id= "row8" class="row-skin">Sample 8</div>
</div>當你運行該代碼繩拉到點擊我，你會看到下面的行被向下推，也它不在兩側正確地漂浮。
我在Chrome和IE11中獲得完全相同的行爲。 https://jsfiddle.net/Lro3rr5z/1/ –
W10上的Firefox Dev.Ed.55 +的結果相同 –
你想要發生什麼？現在第一個盒子沒有足夠的空間來增加像素的數量（'z-index：1'）。 –