0

如何使用 css 和 jquery 做到这一点？

如jsfiddle所示，左栏中有一个按钮。单击此按钮幻灯片可切换右列中的 div，并出现另外 2 张图片（图片编号 2，图片编号 3）

我想做两件事：

第一个：将按钮准确定位在图片编号 1 的左下角。我实际上做不到，因为我不知道左栏中有多少文字，也不知道图片 1 的高度。

第二：当显示或隐藏 div 时，我希望按钮与 div 一起移动。最后，按钮应位于图片编号 3 的左下方

你能帮我做吗？

html结构是基本的：

<div id="col_1">
    <p>Lorem ipsum<br />...<br /></p>
    <p><span id="button">see more pic</span></p>
</div>

<div id="col_2">
    <div id="pic_1">picture number 1</div>
    <div id="pic" class="hidden">      
        <div id="pic_2">picture number 2</div>
        <div id="pic_3">picture number 3</div>
    </div>
</div>

jquery 是基本的：

$("#button").click(function () {
      $("#pic").slideToggle("slow");
    });

css 也很简单。你可以在 jsfiddle 上看到它。

4

1 回答 1

1

你可以做相对位置。这是演示：jsfiddle.net/ar9UB/5/

添加了这个CSS：

#button { position:relative; left: -90px; top:-20px; }

并移动了第 2 列中的按钮。

希望这可以帮助。

于 2012-10-30T00:31:53.577 回答