0

これを説明する最良の方法は、JSFiddleの例を使用することです：http：//jsfiddle.net/8tXku/

各divを左側にフローティング.projectし、いくつかの単純なjQueryを使用して展開し、クリックすると説明が表示されるようにしますが、最初のプロジェクトをクリックすると、3番目のプロジェクトが右側にプッシュされます。拡張されました。

3番目のプロジェクトdivに、右に移動するのではなく、展開されたコンテンツを含むページを優雅に下に移動させる方法はありますか？

4

2 に答える 2

0

これは汚い解決策かもしれませんが、それは完全に機能します。

.project-descriptionaを与えると、周囲に影響を与えることなくposition:absolute;それが可能になりますが、他のいくつかの調整を行う必要がありました。.slideDown()divs

それぞれがその中に含まれるように追加position:relative;しました。.project.project-description

最終的なCSS

.project {
    width: 250px;
    float: left;
    border: 1px solid #dedede;
    border-radius: 6px;
    -webkit-box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.4);
    -moz-box-shadow:    0px 0px 20px rgba(50, 50, 50, 0.4);
    box-shadow:         0px 0px 20px rgba(50, 50, 50, 0.4);
    margin-right: 30px;
    margin-bottom: 30px;
position:relative;
}

.project-description {
    padding: 5px;
    font-size: 12px;
    display: none;
    position:absolute;
    background-color:white;
    left:0;
    right:0;
    z-index:99;
}

これをチェックしてください：http：//jsfiddle.net/AliBassam/N4U3R/

アップデート

大きなテキストが含まれている場合.project-description（明らかに）、それは下部のdivの下に非表示になりますz-index:99;。.project-description

これをチェックしてください：http：//jsfiddle.net/AliBassam/pMGDZ/

于 2013-01-28T00:44:47.530 に答える
0

.project-description現在のスタイルをこれに置き換えます

.project-description {
    padding: 5px;
    font-size: 12px;
    display: none;
    position: absolute;
    -webkit-box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.4);
    -moz-box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.4);
    box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.4);
    width:325px;
    border-radius: 0 0 6px 6px;
    background: #FFFFFF;
    z-index: 1;    
}

デモ：http： //jsfiddle.net/enve/8tXku/4/

于 2013-01-28T00:48:48.050 に答える