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

div 框不能并排放置在#sortable容器中。

你需要扩展容器，如果你真的必须使用浮动，你也需要包装#box2和#box3div

尝试：

<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 回答