4

グリッドのようなレイアウトで、いくつかの div の並べ替えとサイズ変更を実装しようとしています。

これはフィドルの例です

しかし、問題は、サイズを変更すると（divを大きくする）、ソートしようとするとソートが正しく機能しないことです。適切に整列する代わりに、内部 div が配置されている他の div からオーバーフローしています。

リサイズはフィドルでは機能しません。これは、サイズ変更後に達成する必要がある正しい結果です (サイズ変更可能な最大幅が外側の div の幅であると仮定します)。しかし、私のコードでは、サイズを変更しようとすると要素が重なり、右側に配置すると要素が外側のコンテナ div からオーバーフローします。（結果では）それは起こっていません、div{3}をdiv{2}の位置に置いてみてください

ブートストラップ流体レイアウトを使用しています。そのため、div はスパン クラスでサイズ設定されます。これは私が使用しているコードです

<div class="row-fluid" id="sortable">
            <div class="span6 sort_container"> <div class="well">aaaaaaaaaaaaa</div> </div>
            <div class="span6 sort_container"> <div class="well">bbbbbbbbbbbbb</div> </div>
            <div class="span6 sort_container" > <div class="well">ccccccccccc</div> </div>
            <div class="span6 sort_container"> <div class="well">dddddddddddd</div> </div>
            <div class="span6 sort_container"> <div class="well">eeeeeeeeeeee</div> </div>
        </div>

<script>

$(document).ready(function() {
   $(function() {
        $( "#sortable" ).sortable();
    });

$(function() {
        $('.well').resizable();
    });
});
</script>
4

2 に答える 2

5

くそ！私は何がうまくいかなかったのかを理解しました。「sort_container」クラスを呼び出す代わりに、「.well」を呼び出しました。これは、resizable() 関数を持つ要素の内部 div です。

これで解決しました

<div class="row-fluid" id="sortable">
            <div class="span6 sort_container"> <div class="well">aaaaaaaaaaaaa</div> </div>
            <div class="span6 sort_container"> <div class="well">bbbbbbbbbbbbb</div> </div>
            <div class="span6 sort_container" > <div class="well">ccccccccccc</div> </div>
            <div class="span6 sort_container"> <div class="well">dddddddddddd</div> </div>
            <div class="span6 sort_container"> <div class="well">eeeeeeeeeeee</div> </div>
        </div>

<script>

$(document).ready(function() {
   $(function() {
        $( "#sortable" ).sortable();
    });

$(function() {
        $('.sort_container').resizable();
    });
});
</script>

唯一の問題は、要素の約 150% の高さを上げようとすることです。いくつかの空白が残ります。それを削除して一番下の要素を表示する方法はありますか?

横方向にリサイズするとぴったり揃う

例

于 2012-07-27T12:25:07.413 に答える