1

オンライン デザイン ポートフォリオを作成しているときに、この問題に遭遇しました。私には複雑に思えますが、それを行う方法があることはわかっているので、解決策が見つからないことに不満を感じています。助けてください！

私のデザインでは、モバイル、タブレット、デスクトップ/ラップトップ向けにサイトを最適化するために、メディア クエリを使用する必要があります。モバイル バージョンには、サムネイルの 1 つの列があります。各サムネイルをクリックすると、jQuery の slideToggle によってその下にある非表示の div が表示され、他のプロジェクトのサムネイルが押し下げられます。

それがモバイル版の仕組みであり、うまく機能します。問題は、タブレットとデスクトップ/ラップトップのバージョンです。それらのバージョンでは、サムネイルをグリッド パターンで表示する必要があります。タブレットでは 2 つ、デスクトップ/ラップトップでは 3 つ並べて、すべてのバージョンで無限の行があります。HTML を使用してグリッドに表示することはできますが、サムネイルをクリックすると問題が発生し、slideToggle を介してその下の div が表示されます。メディア クエリを使用しているため、HTML の順序はモバイル バージョンと同じであり、非表示の div はコード内の各サムネイルのすぐ下にあります。したがって、非表示の div を表示すると、クリックされているサムネイルと同じ行にあるサムネイルを含む、他のすべてのサムネイルが押し下げられます (コード内でサムネイルがその後にある場合)。各行の最後の div は、私がやりたいことを行います。非表示の div が表示されると、次の行が押し下げられます。非表示の div を行の下に表示し、下の行にあるサムネイルを押し下げます。

そして明らかに、可能であれば別の HTML を作成しないように、メディア クエリに固執したいと考えています。

サムネイルと非表示の div に対して HTML を繰り返す:

<div class="body">
    <div class="thumb"></div>
    <div class="projectWrapper"></div>
    <div class="thumb"></div>
    <div class="projectWrapper"></div>
    <div class="thumb"></div>
    <div class="projectWrapper"></div>
    <div class="thumb"></div>
    <div class="projectWrapper"></div>
    <div class="thumb"></div>
</div>

問題を示すために jsfiddle を作成しました: http://jsfiddle.net/EuHyc/13/

div は jQuery を使用して非表示になっていることに注意してください。CSS でそれらを非表示にすると、非表示の div 内のコンテンツが表示されたときに適切に表示されませんでした。また、float:left は非表示の div をレイアウト内でその下に表示することを強制しないため、display:inline-block を使用する必要がありました。

問題を適切に説明したことを願っています。助けてくれてありがとう！心から感謝します！

4

0 に答える 0