有線の問題に直面しています。ブートストラップを使用して、次のようなレイアウトをコーディングしました。
<div class="row-fluid">
<div class="span4" id="block1">Some short text</div>
<div class="span4" id="block2">Some LONG text<br/>displayed on<br/>multiple lines</div>
<div class="span4" id="block3">Some short text</div>
</div>
私のカスタム CSS はいくつかの装飾を追加し、それぞれ.span*
に境界線 (境界線、影など) が表示されます。その結果、はおよび#block2
よりも背が高くなります。それぞれのすべてを解析し、それぞれの高さが同じになるように高さを調整する関数をコーディングしました。ここまでは、すべて正常に動作します。#block1
#block3
autoAlign()
.span*
.row-fluid
$(this).css('height', value)
.span*
.row-fluid
私のプロジェクトでは、次のようなものがあります。
<div class="row-fluid">
<div class="span8" id="left">Some VERY LONG text<br />...<br />...</div>
<div class="span4" id="right">
<div class="row-fluid">
<div class="span12">Some fields</div>
</div>
<div class="row-fluid">
<div class="span12" id="graph"></div>
</div>
</div>
</div>
Here #left
is taller than #right
and, functionで呼び出しautoAlign()
て#right
同じ高さにし、jqplot#left
でグラフを描画します。チャートができるだけ多くの高さを使用するために、jqplotでチャートを描画する前に#graph
高さを変更する必要があります。#graph
私の問題は、各要素に追加されていることを確認できても、ブラウザー (ここでは Chrome 27) で行われた調整がautoAlign()
すぐに考慮されないことです。その結果、いずれかの高さにアクセスしようとした場合、または現在の高さを取得しようとすると (つまり、考慮せずに)、この要素を残りのすべての要素に合わせるために必要なサイズを計算できません。のスペース。CSS の変更は、関数を終了するときに画面にのみ適用されますstyle="height: NNNpx"
.span*
#right
$('#right').height()
$('#right').css('height')
style="height: NNNpx"
#graph
#right
だから、私の質問は次のとおりです: 最近の CSS の変更を強制的に再描画/適用する方法はありますか?
ありがとう。