0

css と jquery でこれを行うにはどうすればよいですか?

jsfiddleに示されているように、左の列にボタンがあります。このボタン スライドをクリックすると、右側の列の div が切り替わり、他の 2 つの画像が表示されます (画像番号 2、画像番号 3)

私がやりたいことが2つあります：

1つ目 : ボタンを画像1の左下に正確に配置します。左の列にどれだけのテキストがあるのか​​ わからないため、実際にはできません。また、画像1の高さもわかりません.

2つ目: 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 に答える