Jquery 如果前一个李有更高的高度，则会出现一些空白

我有一些看起来像盒子列表的

屏幕截图

列表

css

#可选{
列表样式类型：无；
保证金：0；
填充：0；
宽度：450px；
}
#李.处理{
背景：#f8f8；
位置：绝对位置；
左：0；
排名：0；
底部：0；
填充：8px；
}
#可选li{
保证金：3倍；
填充：1px；
浮动：左；
宽度：100px；
高度：80px；
字号：4em；
文本对齐：居中；
}

我会动态地改变一些

li

的高度，把它搞砸了

看。在这里，我合并选定的框。尝试选择4和8，您将看到问题

屏幕截图

我需要的是：

我想用4和5

仅当框具有相同的宽度（如果垂直选择）且只有框具有相同的高度（如果水平选择）时，选择才适用

---

听起来你需要的是一份工作。不幸的是，不要认为仅使用HTML和CSS就可以实现这一点。

试试砌体

（这是官方示例的一个分支）

（不带js按钮）

（当你点击apply时。如果你想在拖放时得到结果，在var merge中应用mansonry）

HTML

---

我使用的不是列表，而是表来使用

colspan

和

rowspan

。JavaScript已被完全注释，请询问是否有不清楚的地方

HTML:

JavaScript:

$("#selectable").selectable({
    filter: "td",
    stop: function(){
        var $selected = $(".ui-selected");

        if( $selected.length < 2 ){
            //Cannot combine when there are less than 2 selected
            return false;
        }

        //Remove strange acting hidden elements
        $selected.each(function(){
            if($(this).is(":hidden")){
                $selected = $selected.not($(this));
            }
        });

        //Save all the ids of the selected elements in an array
        var ids = $selected.map(function(){
            return parseInt($(this).attr("id"));
        }).get();     

        //Go through all the elements
        //and check if an element is hidden under one of the selected elements. 
        //If so, also select that element.
        var $allElements = $(".ui-selectee");       
        for (var i = 0; i < $allElements.length; i++){
            if(ids.indexOf($allElements[i].hiddenUnder) >= 0){
                $selected = $selected.add($allElements.eq(i));
            }
        }        

        //Comparing with the first td: vertical or horizontal
        var vertical = 0;
        var horizontal = 0;        
        for ( var i = 0; i < $selected.length; i++ ){
            //Checking: horizontal, has it the same tr as parent?
            if( $selected[0].parentNode === $selected[i].parentNode ){
                //Same tr as parent, so horizontal                
                horizontal++;
            }         

            //Checking: vertical, has it the same child index?
            if($selected.eq(0).index() === $selected.eq(i).index()){
                //Same child index, so vertical
                vertical++;
            }

        }

        //If the selected elements are a block, 
        //The product of horizontal and vertical should equal the amount of selected elements.
        if(horizontal*vertical !== $selected.length){
            return false;
        }


        //Hide all the td except the first on (skip 0), 
        //and save the element they are hidden under.
        for (var i = 1; i < $selected.length; i++){
            $selected.eq(i).hide();
            $selected[i].hiddenUnder = ids[0];
        }     

        //And set the colspan and the rowspan of the first one
        $selected.eq(0).attr({
            colspan: horizontal,
            rowspan: vertical
        });        
    }
})

$（“可选”）。可选({
过滤器：“td”，
停止：函数（）{
变量$selected=$（“.ui selected”）；
如果（$selected.length<2）{
//如果选择的数量少于2，则无法合并
返回false；
}
//移除奇怪的隐藏元素
$selected.each（函数（）{
如果（$（this）.is（“：hidden”））{
$selected=$selected.not（$（this））；
}
});
//将选定元素的所有ID保存在数组中
var id=$selected.map（函数（）{
返回parseInt（$（this.attr（“id”））；
}).get（）；
//检查所有元素
//并检查某个图元是否隐藏在其中一个选定图元下。
//如果是，也选择该元素。
var$allegements=$（“.ui selectee”）；
对于（变量i=0；i<$allegements.length；i++）{
if（ids.indexOf（$allegements[i].hiddenUnder）>=0）{
$selected=$selected.add（$allegements.eq（i））；
}
}        
//与第一个td相比：垂直还是水平
垂直var=0；
var水平=0；
对于（变量i=0；i<$selected.length；i++）{
//检查：水平，其tr是否与父级相同？
如果（$selected[0]。parentNode===$selected[i]。parentNode）{
//与父项相同的tr，因此水平
水平++；
}         
//检查：垂直，是否具有相同的子索引？
如果（$selected.eq（0.index（）==$selected.eq（i.index（））{
//相同的子索引，所以是垂直的
垂直++；
}
}
//如果选定图元是块，
//水平和垂直的乘积应等于所选元素的数量。
如果（水平*垂直！==$selected.length）{
返回false；
}
//隐藏除第一个打开外的所有td（跳过0），
//并保存隐藏在其下的元素。
对于（变量i=1；i<$selected.length；i++）{
$selected.eq（i）.hide（）；
$selected[i].hiddenUnder=ids[0]；
}     
//并设置第一个的colspan和rowspan
$selected.eq（0）.attr({
科尔斯潘：水平，
行跨度：垂直
});        
}
})

我认为实现这一点的最佳方法是使用jquery插件mashine.min.js 最好使用百分比格式的宽度，而不是固定像素

假设您有一个包含4列的网格

<li class="item w1"> content 1 </li>
<li class="item w2"> content 2 </li>
<li class="item w3"> content 3 </li>
<li class="item w4"> content 4 </li>

---

然后元素将在网格中，每行中的元素数量根据元素的宽度而变化。

尝试了

display:inline block？
li
s将像普通的
div
s一样运行。请查看我更新的问题和fiddle这不是一个问题，它要求为您编写代码。好吧，如果用不同的措辞，1可能是一个问题，但2只是一个为你工作的请求……你看到我的答案了吗？@NishamMahsin，不幸的是，实际上没有澄清任何事情。小提琴手要做什么？你能解释一下你的代码是如何工作的，或者你想完成什么吗？我正在选择框并合并所选框boxes@NishamMahsin啊，现在我明白了！然后，您需要做的是将实际的DOM元素按正确的顺序移动，以便它们以正确的方式浮动以填充空间..是的。当u合并4和8时，方框5、6、7、10、11、12将下降。但是我不想要这个。是的，我知道。不确定您是否可以使用
列表和CSS来完成此任务。您可能需要将其构建为一个表并计算
<table id="selectable">
    <tr>
        <td class="xioCss" id="1">1</td>
        <td class="xioCss" id="2">2</td>
        <td class="xioCss" id="3">3</td>
        <td class="xioCss" id="4">4</td>
    </tr>
    <tr>
        <td class="xioCss" id="5">5</td>
        <td class="xioCss" id="6">6</td>
        <td class="xioCss" id="7">7</td>
        <td class="xioCss" id="8">8</td>
    </tr>
    <tr>
        <td class="xioCss" id="9">9</td>
        <td class="xioCss" id="10">10</td>
        <td class="xioCss" id="11">11</td>
        <td class="xioCss" id="12">12</td>
    </tr>
</table>

#selectable {
    width: 400px;
    height: 200px
}

.xioCss{
    width: 25%;
    height: 33%;
    border: 1px solid black;
    text-align: center;
    font-size: 25px
}

#selectable .ui-selecting { 
    background: #FECA40; 
}

#selectable .ui-selected { 
    background: #F39814; 
    color: white; 
}

$("#selectable").selectable({
    filter: "td",
    stop: function(){
        var $selected = $(".ui-selected");

        if( $selected.length < 2 ){
            //Cannot combine when there are less than 2 selected
            return false;
        }

        //Remove strange acting hidden elements
        $selected.each(function(){
            if($(this).is(":hidden")){
                $selected = $selected.not($(this));
            }
        });

        //Save all the ids of the selected elements in an array
        var ids = $selected.map(function(){
            return parseInt($(this).attr("id"));
        }).get();     

        //Go through all the elements
        //and check if an element is hidden under one of the selected elements. 
        //If so, also select that element.
        var $allElements = $(".ui-selectee");       
        for (var i = 0; i < $allElements.length; i++){
            if(ids.indexOf($allElements[i].hiddenUnder) >= 0){
                $selected = $selected.add($allElements.eq(i));
            }
        }        

        //Comparing with the first td: vertical or horizontal
        var vertical = 0;
        var horizontal = 0;        
        for ( var i = 0; i < $selected.length; i++ ){
            //Checking: horizontal, has it the same tr as parent?
            if( $selected[0].parentNode === $selected[i].parentNode ){
                //Same tr as parent, so horizontal                
                horizontal++;
            }         

            //Checking: vertical, has it the same child index?
            if($selected.eq(0).index() === $selected.eq(i).index()){
                //Same child index, so vertical
                vertical++;
            }

        }

        //If the selected elements are a block, 
        //The product of horizontal and vertical should equal the amount of selected elements.
        if(horizontal*vertical !== $selected.length){
            return false;
        }


        //Hide all the td except the first on (skip 0), 
        //and save the element they are hidden under.
        for (var i = 1; i < $selected.length; i++){
            $selected.eq(i).hide();
            $selected[i].hiddenUnder = ids[0];
        }     

        //And set the colspan and the rowspan of the first one
        $selected.eq(0).attr({
            colspan: horizontal,
            rowspan: vertical
        });        
    }
})

<li class="item w1"> content 1 </li>
<li class="item w2"> content 2 </li>
<li class="item w3"> content 3 </li>
<li class="item w4"> content 4 </li>

.item { width:25%; }
.w1 { width:50%; }
.w2 { width:25%; }
.w3 { width:75%; }
.w4 { width:100%; }