0

ちょっと助けを求めています - 私はコーダーよりもデザイナーですが、学ぼうとしています:)

私はこのような作業をしていますが、サムネイル画像を展開された div の高さにサイズ変更する方法がわかりません。

コンテナー div があり、その div 内に、さまざまな製品に関する情報を含む複数の「拡張可能な」div があります。

これらの展開可能な各 div には、タイトル、サムネイル画像、製品の価格 (および div 自体を展開するためのプラス記号の画像) があります。

div を展開すると、製品に関する詳細情報が表示されます。

しかし、div が展開されると、「価格」も非表示になり (展開された情報に表示されるようになったため)、画像が展開された div の高さに自動的にスケーリングされるようにしたいと考えています。

したがって、製品情報は div の左側にあり、画像は div の右半分を占めます (その上にマイナス ボタンがあります。

これは私のhtmlです

<div class="expandingContentContainer">
    <div class="expandingContent">
        <div id="expandingContentHeader" style="display:inline; float:left">
            <h4>Portable navigation system</h4>
        </div>
        <div id="expandingContentThumb" style="display:inline;">
            <img src="images/thumbnails/audio-portable-navigation-thumbs.jpg" />
        </div>
        <div id="expandingContentPrice" style="display:inline;">
            <img src="images/assets/icon_pound.png" />Price: £200
        </div>
        <div id="expanderSign">
            <img src="images/assets/icon_plus.png" />
        </div>
        <div id="expanderContent" style="display:none">
            <p>Bluetooth voice dialling without the hassle of having to train the device. Reads text messages out loud and features a stylish 2,8" colour display. Play back music and phone calls via the OE-audio system.</p>
            <p><img src="images/assets/icon_pound.png" />Price: £200</p>
            <p><img src="images/assets/icon_tick.png" />Availability: Most models<img src="images/assets/icon_hash.png" />Part Number: 3600-78-474<img src="images/assets/icon_pencil.png" />Legal: N/A</p>
        </div> 
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
$("#expanderSign").click(function(){
    $("#expanderContent").slideToggle();
    if ($("#expanderSign").text() == "+"){
        $("#expanderSign").name("−")
    }
    else {
        $("#expanderSign").text("+")
    }
});
});
</script>
4

2 に答える 2

0

CSS で完全に解決できるもののように思えます。container-div の高さが固定されている限り、img-element の高さを に設定して、height: 100%それに応じて画像をスケーリングできます。ただし、コンテナの display-mode が に設定されている場合、これは機能しませんdisplay: inline。display: inline-blockdivの高さを設定できるようにするために使用する必要があります。

于 2013-05-10T13:53:24.353 に答える
0

適切なヘルプを得るには、Web サイトまたは css ファイルへのリンクを追加する必要があります。css に変更を加える必要があり、(必要なサポートによっては) いくつかの javascript (jquery または zepto) が必要になる場合があります。ビルド前のライブラリを使用することもできますが、実際には必要ありません。

于 2013-05-10T14:01:16.283 に答える