0

float left を使用して 3 つの div コンテナーが (グリッドのように) 互いに積み重ねられた行が多数あり、それぞれに最大高さ制限を使用して内部のコンテンツを切り捨てる隠しオーバーフローがあります。div を展開するために、クラスで :hover を使用して最大高さを 999px に変更し、マウスがホバリングしている間にコンテンツを表示しますが、ホバーされた div がその下の div を展開すると、その下の div が壊れて右にシフトし、または、ホバリングされた div の最下点より下にドロップダウンすると、div が混沌として見栄えが悪くなります。

ホバーされた div を展開して、下の div に影響を与えずにコンテンツを表示するにはどうすればよいですか?

.clips   {
    width: 294px;
    max-height: 150px;
    padding: 2px;
    background-color: #EBEBEB;
    overflow: hidden;
    border: 1px solid #666;
    display: block;
    margin: 0;
    float: left;
}
.clips:hover {
    max-height: 999px;
}
4

2 に答える 2

0

3 つの div のグループを div でラップしてみてください。これにより、他の div が展開された右側にフローティングするのを防ぐことができます。

于 2013-09-05T23:09:33.760 に答える
0

フロートの代わりに絶対配置を使用することをお勧めします

最初に、各行を相対的に配置されたブロックでラップして、それらが積み重ねられ、「行」内に「セル」を配置できるようにする必要があります。

<div class="row">
    <div class="cell">a</div>
    <div class="cell">b</div>
    <div class="cell">c</div>
</div>
<div class="row">
    <div class="cell">d</div>
    <div class="cell">e</div>
    <div class="cell">f</div>
</div>
<div class="row">
    <div class="cell">g</div>
    <div class="cell">h</div>
</div>

次に、このようにスタイルします

.row{
    position: relative;
    height: 20px;
}
.cell{
    width: 33%;
    outline: 1px dashed blue;
    position: absolute;
}
.cell:nth-of-type(1){
    left: 0;
}
.cell:nth-of-type(2){
    left: 33%;
}
.cell:nth-of-type(3){
    left: 66%;
}
.cell:hover{
    height: 200px;
    background: pink;
}
于 2013-09-05T23:11:48.067 に答える