1

画像といくつかのテキストを含む一連の div を作成する php スクリプトがあります。div はフロートされているため、すべて左から右に読み取られます。私の問題は、ブラウザーのサイズを変更したり、小さな画面サイズで表示したりすると、div が互いの下に浮いてしまうことです。画面上に 4 つの div しか表示されない場合は、4 つの div のみを表示する必要があります。7 なら 7 です。これが現在行っていることですここに画像の説明を入力

そして、これはそれがどのように見えるべきかです

ここに画像の説明を入力

私のコードはどのように見えるか

<div id="mainContent2">


                                    <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/7599385542.jpg" height="150px"  /></center>
                <span>Live -Frat Party At</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 200.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/7599399935.jpg" height="150px"  /></center>
                <span>Road To Revolution:</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 250.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/9362424712.jpg" height="150px"  /></center>
                <span>2 Points Of Authority</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 100.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/9362426132.jpg" height="150px"  /></center>
                <span>Somewhere I Belong</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 100.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/9362426302.jpg" height="150px"  /></center>
                <span>Faint (Single)</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 100.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/9362483262.jpg" height="150px"  /></center>
                <span>Reanimation (Remix</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 150.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/9362484622.jpg" height="150px"  /></center>
                <span>Meteora (Import)</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 150.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/WBCD 1987.jpg" height="150px"  /></center>
                <span>Hybrid Theory</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 100.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/WBCD 2024.jpg" height="150px"  /></center>
                <span>Reanimation (Remix Album)</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 100.00</span>
                </div>
                                        <div id="newReleaseDiv"><center><input type="image" img src="Images/Database Images//GALLO/WBCD 2061.jpg" height="150px"  /></center>
                <span>Live In Texas</span><br  />
                 <span> 
                 Linkin Park</span><br />
                <span>R 100.00</span>
                </div>

</div>

このようなページには複数の div があるため、ブラウザのサイズが変更された場合、ページをリロードせずに div を非表示または表示し、ブラウザ間で互換性があるという最善の解決策は何ですか?

ff、chrome、opera では機能するが IE では機能しないこのスクリプトを使用しました。ページは正しく読み込まれますが、ブラウザのサイズを変更すると、div が非表示になったり表示されたりしません。ページを再度リロードする必要があります

<script type="text/javascript">
          function newReleaseDisplay () {
               if (width > 1000) {
       var divsToDisplay = Math.floor(width / 175);
       $("#mainContent2 > div").slice(1).show();
       $("#mainContent2 > div").slice(divsToDisplay).hide();
       }
       else {
            var divsToDisplay = Math.floor(1000 / 175);
            $("#mainContent2 > div").slice(1).show();
            $("#mainContent2 > div").slice(divsToDisplay).hide();

       }
      }
    var width = $(window).width();
    window.onload = newReleaseDisplay();

$(window).resize(function(){
   if($(this).width() != width){
      width = $(this).width();
       console.log(width);
       newReleaseDisplay ();
   }
});
</script>
4

1 に答える 1

2

.newReleaseDivすべて左にフロートし#mainContent2、1 行の高さの固定高さを持つように設定し、overflow: hidden;

ここでは JavaScript は実際には必要ありません。代わりに CSS を表示/レイアウトに使用する必要があります。

于 2013-02-08T08:03:42.170 に答える