2

我正在使用 jQuery“幻灯片”效果制作一个小网站。我在 3 个 div 标签上多次使用它。我有一个 div 标签触发另一个 div 标签滑入/滑出。我希望每个“行”有一个“动态”（移动的）div 标签和一个“静态”（触发动态的）。我遇到的问题是，每当单击“静态”后隐藏“动态”标签时，下一个“静态”div 标签会向上移动一行，使其看起来非常糟糕。如果我不够清楚，我会在最后提供一个 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）清除.dynamic样式上的左浮动和 2）清除样式上的右浮动，.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 回答