0

私のプロジェクトには、左右に2つのdiv領域があるWebページがあります。左側のdivはページ幅全体のほぼ60％を占め、右側のdivはページの約36％を占めます。ブラウザを右側または左側から縮小するときに、両方のdiv領域のサイズを適切な比率で変更したかったのです。UIはJavascriptから生成されています。これがコードです。

boardHolderPadding = $board.outerHeight() - $board.height();
$board.height(viewportHeight - siblingsHeight - boardHolderPadding);

this.$('#board .droptarget').setWidthAsRatioOfHeight(this.options.ratio);

$('#sidebar').width($(window).width() - $board.find('#board').width() - 50);

JQueryサイズ変更プラグインを試してみましたが、探している適切な結果を得ることができませんでした。誰か提案がありますか？

ありがとう

4

3 に答える 3

1

jsfiddleの例を参照してください。ただし、幅を計算するのではなく、パーセンテージで設定する必要があると思います。表示はインラインブロックに設定されていることに注意してください。

<div>
    <div class="small-left-column">this is the left column</div>
    <div class="large-right-column">this is the right column</div>
</div>

<style>
.small-left-column {
    width: 30%;
    background-color: #aeaeae;
    display: inline-block;
}
.large-right-column {
    width: 60%;
    background-color: #aeaeae;
    display: inline-block;
}
</style>

だから私はあなたの例のためにあなたはこのようなものを持っていると思います

$(document).ready(function () {
    $('#sidebar').addClass('small-left-column');
    $('#board').addClass('large-right-column');
});
于 2012-07-27T08:50:41.480 に答える
0

上記の純粋な Javascript バージョンを探しているかもしれません。

$(document).ready(function () {
    $('#sidebar').css( {
        width: '30%'
        backgroundColor: '#aeaeae',
        display: 'inline-block'
    });
    $('#board').css({
        width: '60%',
        backgroundColor: '#aeaeae',
        display: 'inline-block'
    });
});
于 2012-07-27T19:02:13.627 に答える
0

私はJavascriptで別の方法でそれを行いました。そのような問題に遭遇した場合、これが誰かが修正するのに役立つことを願っています

relativeSize : function(width, height){
    var boardWidth = this.$("#board").width(),
            boardHeight = this.$("#board").height(), 
            newcard = this.$("#newCard").width(), 
            space = width - boardWidth - newcard;
            ratio = space / width * 3; //used to increment the ratio with 3 as the ratio is very tiny value, this will help to increase minimizing size
            bheight = boardHeight - 25; // used to reduce the height by 25px, u can use any amount to match ur ratio
        var relHeight = (space < ratio) ? bheight : height;
        return relHeight;
  }

ありがとう

于 2012-08-07T03:48:48.903 に答える