Question

我需要创建产品网格：

固定div高度;
展开 - 仅在div：hover;
不要移动其他div。
CSS

工作样本： http://rozetka.com.ua/mobile-phones/c80003/filter/preset=smartfon/

CSS

.product-grid {}
.item_box_in2 {
    display: inline-block;
    border: 1px #DDD solid;
    width: 30%;
    float: left;
    margin-left: 5px;
    margin-bottom: 5px;
    background-color: #f1f1f1;
    height: 15em;
    overflow:hidden;}
.item_box_in2:hover {
    overflow: visible;
    height: auto;
}

HTML

<div class="product-grid">
<!--Product 1-->
<div class="item_box_in2">    
<h1>Title 1</h1>
    <p>Text 1</p>
    <p>Price 1</p>
    <p>Desk 111111111 111111111 11111111</p>
</div>
<!--Product 2-->
<div class="item_box_in2">   
<h1>Title 2</h1>
    <p>Text 2</p>
    <p>Price 2</p>
    <p>Desk 222222222 2222222222 22222222222 222222222 222222222222 22222222222222 222222222222 222222222222222 22222222222222 22222222222222 222 222222222222 22222222222 2222222222222222 2222222222222222222222 222222 22222222222 22222222222</p>
</div>
<!--Product 3-->
<div class="item_box_in2">   
<h1>Title 3</h1>
    <p>Text 3</p>
    <p>Price 3</p>
    <p>Desk 333333333 333333333 33333333333333333 333333333333333 333333333333333 3333333333333333 33333333333333333333 33333</p>
</div>
<!--Product 1-->
<div class="item_box_in2">   
<h1>Title 1</h1>
    <p>Text 1</p>
    <p>Price 1</p>
    <p>Desk 111111111 111111111 11111111</p>
</div>
<!--Product 2-->
<div class="item_box_in2">   
<h1>Title 2</h1>
    <p>Text 2</p>
    <p>Price 2</p>
    <p>Desk 222222222 2222222222 22222222222 222222222 222222222222 22222222222222 222222222222 222222222222222 22222222222222 22222222222222 222 222222222222 22222222222 2222222222222222 2222222222222222222222 222222 22222222222 22222222222</p>
</div>
<!--Product 3-->
<div class="item_box_in2">
<h1>Title 3</h1>
    <p>Text 3</p>
    <p>Price 3</p>
    <p>Desk 333333333 333333333 33333333333333333 333333333333333 333333333333333 3333333333333333 33333333333333333333 33333</p>
</div>
</div>

Answer 1

你可能最好给每个div一个唯一的ID，然后定位它们（不是因为它会在扩展时移动它们），并且每个ID都会悬停，例如。

ID-TopRowBox1:hover {
    height: 400px;
    position: absolute;
    z-index: 9999;
}
ID-BottomRowBox1:hover {
    height: 400px;
    position: absolute;
    z-index: -9999;
}

我希望这有助于解决您的问题：）

CSS - 在悬停时展开div，不要移动其他div

1 个答案: