0

さまざまな高さと幅を処理できる jquery-ui ソート可能機能が既にありますが、次のように配置すると問題が発生します。

http://jsfiddle.net/N52GP/7/

それはどのように見えるべきですか：

http://i.imgur.com/NkDxn.jpg

これは CSS フローティングの問題であることはわかっていますが、何時間もテストして検索しても解決策が見つかりません。Box 4 を float: right に設定しても、Box 3 と同じ高さに表示されます。

HTML / CSS フローティング問題のコードを参照してください:

<!DOCTYPE html>
<html>
<body>

    <style>
        .portlet {
            float: left;
            margin: 5px;
            background-color: #b5b5b5;
        }

        #box1, #box4 {
            width: 150px;
            height: 220px;
        }

        #box2, #box3 {
            width: 250px;
            height: 100px;
        }
    </style>

    <div style="float: left; width: 600px; padding: 10px;">

        <div id="box1" class="portlet">
            <div class="portlet-header">Box 1</div>
            <div class="portlet-content">Box Desc</div>
        </div>

        <div id="box2" class="portlet">
            <div class="portlet-header">Box 2</div>
            <div class="portlet-content">Box Desc</div>
        </div>

        <div id="box3" class="portlet">
            <div class="portlet-header">Box 3</div>
            <div class="portlet-content">Box Desc</div>
        </div>

        <div id="box4" class="portlet">
            <div class="portlet-header">Box 4</div>
            <div class="portlet-content">Box Desc</div>
        </div>

    </div>

</body>
</html>

これに対する解決策はありますか？

4

1 に答える 1

0

#sortablediv ボックスは、コンテナーに並べて収まりません。

コンテナを拡張する必要があり、本当にフロートを使用する必要がある場合は、ラップ#box2し#box3て adivにも含める必要があります

試す：

<div id="middle">
    <div id="box2" class="portlet">
        <div class="portlet-header">Box 2</div>
        <div class="portlet-content">Box Desc</div>
    </div>

    <div id="box3" class="portlet">
        <div class="portlet-header">Box 3</div>
        <div class="portlet-content">Box Desc</div>
    </div>
</div>


#middle {
    float:left; 
    width:258px;
}
于 2012-11-15T04:25:34.293 に答える