1

これが質問するのに適切な場所であることを願ってい
ます。コンテナ内に 3 つの div を含む Web ページを作成して
、左右の div のサイズ
を変更できるようにし、中央の div のサイズを左右の div に合わせて変更できるようにし
たいと考えています。 plunker や jsfiddle のコーディング領域のように
、3 つの領域は水平のままで、次の行にジャンプしないようにする必要があります。
この問題は、ほぼ 1 週間にわたって私を悩ませてきました。今では、正しい方向への助けやポインタをいただければ幸いです。

注：私はこのプロジェクトにAngularJsを使用しています.Angularyアプローチでの答えは好ましいですが、他のアプローチは受け入れられます.

アップデート：

サイズ変更可能な部分については明確ではありませんでした。ブラウザのサイズが変更されたときにサイズ変更できるだけでなく、ユーザーがサイズ変更できることを意味していました。中央の領域が適切なサイズに変更されるようになりました。私の問題は、応答がなく、バグが多いことです。左右の領域が両方とも非表示になっている場合、右側の領域をクリックして再度開くと、中央領域の動作にバグが表示されますサイズが変更されると、jsfiddel のように、javascript 領域のサイズを変更すると、css 領域と結果領域のサイズが変更されます。
左右のパネルのサイズを変更すると、それに応じて中央のサイズが変更されるMS PowerPointのより良い例。

これが私のplnkrです。これが十分に明確であることを願っています。
前もって感謝します。

4

2 に答える 2

2

ああ、私は質問を誤解しました。彼は、同じ高さの列ではなく、サイズ変更可能なグリッドを求めました。

以下は、jQuery を使用してコンテナーに垂直方向のサイズ変更を適用する方法の非常に簡単な例です。

この jsFiddle のソース

基本的な Javascript:

var diff = {x: resizeStart.x - e.clientX,y: resizeStart.y - e.clientY}; //Get the difference
resizeStart = {x: e.clientX, y: e.clientY}; // set new starting point

$('.left').width($('.left').width() - diff.x); // Set width of left container
$('.center').css('margin-left', parseInt($('.center').css('margin-left')) - diff.x); //Set margin of center container

ドラッグが開始するポイントを保存し、マウスがあるポイントのデルタを取得します。次に、このデルタを左のコンテナーの幅に追加し、マージンを中央のコンテナーに追加します。

お役に立てれば。

于 2013-02-26T13:35:24.503 に答える
0

これを処理するデフォルトの方法はありません。左右のコンテナーを左右にフローティングすると、左右のコンテナーがレイアウトから外れてしまうためです。

これを処理する唯一の方法は、ページが読み込まれた後に左右のコンテナーの高さを取得し、中央のコンテナーの最小の高さをこの値に設定することです。

jQuery でこの機能を取得する例は、この jsFiddle にあります

HTML: 

<div class="left">
    <div class="left-content">
        Left Column <br/><br/><br/>more rows please...<br/><br/><br/>more rows please...
    </div>
</div>
<div class="right">
    <div class="right-content">
        Right Column <br/><br/><br/>more rows please...
    </div>
</div>
<div class="center">
    <div class="content">
        Center Column
    </div>
</div>

CSS: 

.left {
    float: left;
    width: 200px;
    background: red;
}
.right {
    float: right;
    width: 200px;
    background: green;
}
.center {
    margin: 0 200px;
    background: yellow;
}

JS: 

$(document).ready(function() {
    var max_height = 0;
    $('.left, .right, .center').each(function() {
        if($(this).outerHeight() > max_height) max_height = $(this).outerHeight();
    }).css('min-height', max_height);   
});

有効でない、または非常に複雑な CSS トリックも多数ありますが、それらも機能します。「等高ボックス」で検索してください。

于 2013-02-26T11:02:54.100 に答える