2

jQueryの「スライド」効果を使用して小さなWebサイトを作成しています。3つのdivタグで複数回使用しています。1つのdivタグが別のdivタグをトリガーしてスライドイン/スライドアウトします。「Line」ごとに1つの「Dynamic」（移動するもの）divタグと1つの「Static」（動的をトリガーするもの）が必要です。私が抱えている問題は、「静的」クリック後に「動的」タグが非表示になると、次の「静的」divタグが1行上に移動し、見栄えが悪くなることです。十分に明確でない場合は、最後にJSFiddleを提供します。細いdivをクリックして、太いdivを移動します。

HTML：

<div class="tabs">
<div id="static1" class="static"></div>
<div id="dynamic1" class="dynamic"></div>
<br><div id="static2" class="static"></div>
<div id="dynamic2" class="dynamic"></div>
<br><div id="static3" class="static"></div>
<div id="dynamic3" class="dynamic"></div>
</div>

JS：

$("#static1").click(function() {
    $("#dynamic1").toggle("slide", { direction: "right" }, 1000);
});
$("#static2").click(function() {
    $("#dynamic2").toggle("slide", { direction: "right" }, 1000);
});
$("#static3").click(function() {
    $("#dynamic3").toggle("slide", { direction: "right" }, 1000);
});

CSS：

.dynamic {
overflow: hidden;
width: 100px;
height: 150px;
background: #ccc;
border-top:1px solid #000;
border-right:0px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #000;
float: right;
background:url('../img/bg_tile.jpg') #333d43;
}

.static {
width: 20px;
height: 150px;
background: #ccc;
border: 1px solid #000;
float: right;
background:url('../img/bg_tile.jpg') #333d43;
}

.tabs {
overflow: hidden;
float: right;
}

JSFiddle： http: //jsfiddle.net/3T9je/

4

1 に答える 1

2

1）スタイルの左側のフロートをクリアし、2）次のようにスタイル.dynamicの右側のフロートをクリアする必要があります。.static

.dynamic {
   ...
   clear:left;
}

.static {
   ...
   clear:right;
}

デモ： http： //jsfiddle.net/3QfCf/2/show
ソース： http： //jsfiddle.net/3QfCf/2/

しかし、その理由を正確に説明することはできません。静的なもので両方をクリアしようとしましたが、それがレイアウトの問題を引き起こしました。

編集：不要な<br>タグも削除しました

于 2013-01-12T02:21:22.773 に答える