Question

因此很难将我的问题写进一条线。基本上，我有一堆来自php脚本的生成框，它们需要相同的高度。每个框中都有一个简短的描述，半隐藏，当你悬停框展开以显示其余的内容。

我的问题是，是否可以让下面的整行向下移动扩展的数量，而div不会跳到左边。如果你将鼠标悬停在div 1上，你会看到div 4跳到左边并导致一个没有吸引力的效果，但是如果你将鼠标悬停在div 3上，你会发现整个第二行以统一的方式向下移动。我不确定为什么这会发生在一个而不是另一个。请参阅随附的小提琴

<div class="hover"></div>

.expand{height:100px; width:120px; text-align:center; 
float:left; vertical-align:middle; border:1px solid black; margin:10px;}

.expand:hover {height:120px;}

http://jsfiddle.net/n90ua1cp/

Answer 1

你需要一个包装div来正确输出。

In html
<div class="row">
<div class="expand">1</div>
<div class="expand">2</div>
<div class="expand">3</div>
</div>

 In css
.row{height: 150px;}

对于演示jsfiddle

Answer 2

这是你想要的吗？

.expand{
     height:100px;
     width:120px;
     text-align:center;
     vertical-align:top;
     border:1px solid black;
     margin:10px;
     display: inline-block;
}

.expand:hover {
     height:120px;
}

<强> DEMO HERE - JSFIDDLE

浮动的div在悬停时展开，将第二行div向左移动而不是向下移动

2 个答案: