Question

关于将div浮动到另一个上需要帮助。我对IE11有疑问，因为它推动了底部的其他div而不是侧向浮动。基本上整个问题都没有正确地浮动，我只是觉得有人可能已经经历过这种情况。

附加我的代码片段。请将鼠标悬停在点击我

上

＆＃13;

#row1:hover { 
	top:0px; 
	z-index:1;
	width:450px;
	position:relative; 
	height:200px;
}
#row2 .row-skin { 
	position:relative; 
	top:2px; 
}

#row3 .row-skin { 
	position:relative; 
	top:1px; 
}
#row4 .row-skin { 
    position:relative; 
	top:1px; 
}

.row-skin{
	color: #FFF;
	background-color: #FF00D8;
	display: inline-block;
	border-radius: 25px;
	background: #003466;
	padding: 16px;
	width: 250px;
	height: 145px;
	margin: .50em 0; /* for separating portal-tiles vertically*/
 	overflow: hidden;
	overflow-x: hidden;	
 	transition: height .5s, width .5s;
	transition-timing-function: ease-in-out;
	z-index:0; 
}

@media only screen and (min-width: 480px) {
	.flex-grid{
		-moz-column-count: 4;
		-webkit-column-count: 4;
		column-count: 4;
	}
}

@media only screen and (min-width: 768px) {
	.flex-grid {
		-moz-column-count: 4;
		-webkit-column-count: 4;
		column-count: 4;
	}
}

@media only screen and (min-width: 960px) {
	.flex-grid {
		-moz-column-count: 4;
		-webkit-column-count: 4;
		column-count: 4;
	}
}

＆＃13;

<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>

＆＃13;

当您将代码运行到单击我时，您会看到下面的行被向下推，并且它也没有正确浮动在任何一侧。

Answer 1

将position: relative中的position: absolute更改为#row1:hover。我在IE11中尝试这个解决方案 - 看起来它可以解决你的麻烦：）

我不能在另一个上面显示div（IE11问题）

1 个答案: