1

私は多くのcssの素晴らしい解決策などを知っています...短い話ですが、パディング、マージン、余分なマークアップ、シャドウ、背景色がないかどうかに関して、これが機能することを願っています...だから...私はmそのjqueryバージョンを探しています。

SOでいくつか見つかりました。応募しようとしています。ほとんど動作しているようです。ウィンドウを狭くすると、テキストが重なります。jsを無効にすると、無効になりません。

http://jsfiddle.net/ApUYv/4/

2つの質問：

1）テキストが重ならないようにするにはどうすればよいですか？

2）document.readyまたはwindow.loadを使用する必要がありますか？

注意：overflow: auto;設計者はスクロールバーを使用しないため、オプションではない場合があります。:(

4

2 に答える 2

6

これがあなたが探していたものであるかどうかはわかりません。しかし、私はあなたのjavascriptコードを変更して、ウィンドウのサイズ変更時に列の高さを再調整しました：http: //jsfiddle.net/ApUYv/6/

function resetHeight() {
   var maxHeight = 0;
   $(".equal-height").height("auto").each(function(){ 
       maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; 
   }).height(maxHeight);
}
resetHeight();
// reset height on resize of the window:
$(window).resize(function() { 
    resetHeight();
});

ウィンドウのサイズを変更するときに列のサイズを変更するには、でコールバックを使用する必要がある$(window).resize()ため、コードを関数にカプセル化しましたresetHeight。

次に、この関数を呼び出すたびにmaxHeightを再計算し、それを正しく行うには、各divの高さをauto一時的にリセットして、以前の設定で.each()ループが混乱しないようにする必要があります。maxheightまた、以前の値がまだ残っているため、変数を0毎回リセットする必要があります。

それはあなたが望んでいたことですか？

于 2012-09-26T10:19:07.903 に答える
1

1）非常に小さいサイズにサイズ変更しない限り、重なって表示されません。列が行に変わるように、非常に小さい画面（モバイルなど）のメディアクエリdisplay:block;を追加することを検討する必要があります。

このメディアクエリを実行して、コードのこの更新されたフィドルを確認してください。

@media only screen and (max-width:400px /*change it to your needs*/) {
    #one, #two, #three, #four {
        float:none; display:block; width:100%; margin:1% 0; height:auto !important;
    }
}​

また、ウィンドウのサイズが変更されたときにテキストが重ならないようにするには、jQuery関数を次のようにラップします。

$(document).on('load resize',function(){
    /* do the resizing stuff */
});

2）ページのすべての要素（内部および外部）が読み込ま$(window).loadれるまで待機するため、通常は望ましいですが、特定のケースによって異なります。$(document).ready

于 2012-09-26T10:08:21.280 に答える