0

画像の水平スクロール ギャラリーがあります。すべての<div>画像を含む の幅は、すべての子の outerWidths を合計することによって動的に生成されます。

ギャラリーの設定方法は次のとおりです。

<div class="categoryImageArea">       
	<div class="categoryImage" onclick="window.location = 'http://localhost/kitkittle/product/test-1'">
		<img src="http://localhost/kitkittle/uploads/images/full/58172669e54ea075971494d6293444f5.jpg"><br> 
		<h3>Half Bubble -  $50.00</h3> 
	</div>
	<div class="categoryImage" onclick="window.location = 'http://localhost/kitkittle/product/bubble-mitosis'">
		<img src="http://localhost/kitkittle/uploads/images/full/23aacfda65e43671bede87bc18902b81.jpg"><br> 
		<h3>Bubble Mitosis -  $300.00</h3> 
	</div>
	<div class="categoryImage" onclick="window.location = 'http://localhost/kitkittle/product/bubble-on-water'">
		<img src="http://localhost/kitkittle/uploads/images/full/1e2dc5352f831ebacd3ccbb7a9b4717a.jpg"><br> 
		<h3>Bubble on Water -  $10.00</h3> 
	</div>
	<div class="categoryImage" onclick="window.location = 'http://localhost/kitkittle/product/bubble-on-water1'">
		<img src="http://localhost/kitkittle/uploads/images/full/69f7b2c3b640444dd5a23c3037c3cc84.jpg"><br> 
		<h3>Bubble on Ocean -  $210.00</h3> 
	</div>
	<div class="categoryImage" onclick="window.location = 'http://localhost/kitkittle/product/swimming-bubbles'">
		<img src="http://localhost/kitkittle/uploads/images/full/2d66a56b9f51f29ad5c6f58c82b2ab39.jpg"><br> 
		<h3>Swimming Bubbles -  $0.00</h3> 
	</div>
</div>

の幅はcategoryImageArea、次の関数を使用して生成されます。

function change(){
	if($(window).width() > 768){ 
		var width = 0; 
		$('.categoryImage').each(function(index, element){ 
			width += $(element).outerWidth(true); 
		}); 
		$('.categoryImageArea').width(width); 
	}
	else{ 
		$('.categoryImageArea').width('100%'); 
	} 
}

ブラウザ ウィンドウを最大化 (1900 x 1280) すると、次のようにうまく動作します。 ここに画像の説明を入力

ここに画像の説明を入力

ただし、ブラウザ ウィンドウのサイズが半分になると、機能しません。(申し訳ありませんが、スクリーンショットは見にくいです。最後の 2 つは次の行にプッシュされます)。 ここに画像の説明を入力

これがなぜなのか当惑したので、両方の場合に値を追加するため、JQuerychange()関数 (上記)をalertの値にしました。widthそれは奇妙です。

  • 大きなビューポート (良い): 0 > 984 > 1969 > 2953 > 3937 > 4921
  • ハーフ ビューポート (悪い): 0 > 656 > 1312 > 1968 > 2624 > 3280

私の質問は$(element).outerWidth(true) 、ブラウザのビューポートが異なるという理由だけで、一体何が SO の値を異なるものにしているのですか?

参考までに、適用されるスタイルは次のcategoryImageとおりです。

.categoryImage {
    display: inline-block;
    margin: 2em;
    position: relative;
    cursor: pointer;
}

4

2 に答える 2

0

私は問題を理解しました。何らかの理由で、img { max-width: 100%; }の値を変更していましたouterWidth();(特定の場合のみ)。この問題を解決するために、設定.categoryImage img{ max-width: none; }したところ、私が抱えていた奇妙な問題が解決しました!

于 2015-11-23T18:53:48.847 に答える
0

.categoryImage で、display:inline-block を float:left に置き換えます。次に。categoryImageArea に、overflow:hidden または clearfix のクラスを追加します。

.categoryImage {
    float:left;
    margin: 2em;
    position: relative;
    cursor: pointer;
}
于 2015-11-12T23:51:00.157 に答える