0

実際の問題:ul ofがあります。これ は、 CSS トリックli.columnを使用して、水平方向に整列し、次の行に自動的に折り返されます。float:left(このトリックが十分に一般的であり、ほとんどの人が私が何をしているのかを理解してくれることを願っています?)

そして、li実際にはそれぞれに同じ幅の画像リンクが含まれているため、長すぎる場合にアンカー要素がテキストを折り返すように、li 自体も同じ幅にする必要があります。

残念ながら、<li><a>LONG TEXT</a></li>ラップされているものの 1 つがあり、必然的にそのliコンテナーの高さを増やしたため、次の行の CSS レイアウトが壊れてしまいました。

li.columns代わりに、この高さに一致するようにすべての高さを設定したいのですが、jquery を使用してプログラムで実行したいと考えています。

だから、これは私の部分的なコードです:

var allColumns = $('li.column');
allColumns
.css('width','225px')
.css('padding-right','20px').css('background-color','transparent');
$('li.column:nth-child('+numCol+'n)').css('padding-right','0px');

var maxHeight = 0;
allColumns.each( function(index, item) {
  var height = $(item).height();
  if ( height > maxHeight ) { maxHeight = height; }
} );
allColumns.height(maxHeight);

eachよりネイティブな (最適化された) 何かを使用して maxHeight を取得するループを回避するためにできることはありますか?

4

1 に答える 1

0

残念ながら、この質問に対する答えは、魔法の答えはありません。それは本当にそれを行う方法です。

ただし、<li>コンテンツのサイズに合わせて要素を調整しているようです。それを行う別の方法は、コンテンツを要素に合わせることです<li>(これを行うことは、プロジェクトの要件に依存する場合があります)。これらの css ルールを試すことができます。次のすべてのルールにより、列が長いテキストを処理する方法を操作できます。それを回避できれば、JQueryの作業を行う必要はありません

white-space:nowrap;

overflow:scroll;またoverflow:hidden;

于 2013-05-10T04:05:59.827 に答える