2

ヘッダーテキストの長さが変わります。静的な長さのロゴのセットもあります。

問題：ヘッダー（テキスト）が長すぎたり短すぎたりすると、ロゴがスペースを有効に使用しないか、ロゴが別の行に移動してしまいます。

簡単な用語での解決策ロゴの幅を1つずつ合計し、特定の幅に達するとロゴの表示を停止するスクリプトが必要です。

例えば：

-ロゴは非表示になっています。
-ヘッダースペースは400pxです
-コンテナは800pxです
-残りのスペースは400pxです
-スクリプトは400pxが満たされるまでロゴを1つずつ追加します-4番目の
ロゴが450pxの場合、そのロゴやその他のロゴは表示されません後の他のロゴ。

http://jsfiddle.net/FDkRN/

私は自分が知っていることを試しましたが、私はまだjsに慣れていないので、どんな助けでも素晴らしいでしょう。

前もって感謝します！

4

5 に答える 5

2

これは、JavaScriptを使用せずに、やりたいことを達成しますか？

http://jsfiddle.net/FDkRN/3/

#containerは#headerタイプのdivになると想定しているので、オーバーフローを非表示にします。

于 2012-04-12T16:54:33.353 に答える
1

見出しの幅を修正して、境界を越えないようにし、オーバーフローコンテンツを非表示にするようにロゴコンテナを設定します

h5 { width: 800px; }
#logos ul { white-space: nowrap; width: 400px; overflow: hidden; }
于 2012-04-12T16:57:49.417 に答える
0

これがjQueryを使用してアプローチする方法ですが、おそらく@mikevoermansの回答を使用することをお勧めします。

var sum = 0;
$("#logos>ul>li").each( function() {
    sum += $(this).width();
    if (sum > 200) {
       $(this).hide();  
    }
});

いじる

于 2012-04-12T16:56:52.173 に答える
0

あなたはこのようにそれをするべきです、しかしそれは悪い習慣です。

css

#logos li { display:none; }

</ p> 

$("#logos ul li").each(function(){
    if ($(this).parents("#logos").width() < 200) 
        $(this).show();
});​​​

http://jsfiddle.net/ocanal/FDkRN/7/

于 2012-04-12T16:57:24.517 に答える
0

これにより、ロゴの合計幅が合計され、特定の最大幅に達した後、すべてのロゴが非表示になります。

​​$(document).ready(function(){

var maxWidth = 200;
var totalWidth = 0;

    $('#logos li').each(function(){
        var logoWidth = parseInt($(this).width());

        if(totalWidth + logoWidth > maxWidth)
        {
           $(this).hide();   
        }

        totalWidth += logoWidth;
    });


});​

$(this).remove()単に非表示にするのではなく、要素を削除したい場合にも使用できます。

于 2012-04-12T16:57:51.380 に答える