Javascript 如何使用Children Divs实现单词包装效果

我目前正在处理一个页面，该页面有一个表单（在内联模式窗口（“Colobox”代码）和复选框，单击该表单时，会将div（描述选中的复选框）追加回“parent”页面中的父div。
我的问题是：如何使用这些子div实现“文字换行”效果？
我有3个父div，当选中复选框时，子div将附加到其中。但是，我希望.ksa_check_k类的div保持在一个“行div”上，.ksa_check_类的div保持在一个“行div”上，.ksa_check_a类的div保持在一个“行div”上 此外，是否有一种方法可以根据每个子div的id中的数值对每个“行”中的div进行“排序”，以补偿复选框的“数字顺序错误”点击

下面是基本的css、javascript和html表单代码（见下文）。 此处可以找到引用的色盒代码文件：

谢谢你的帮助

 <style>
    .inline_box{
    background-color:#FFCC00;
    padding:10px;  
    }

    tr.oddrow td {
    background-color: #eee;
    }

    .toBeCompared_k {
    display:block;
    background:red;
    }
    .toBeCompared_s {
    display:block;
    background:blue;
    }
    .toBeCompared_a {
    display:block;
    background:yellow;
    }
    .toBeCompared_new_k {
    display:block;
    background:red;
    border:1px solid black;
    margin:2px;
    float:left;/**/
    }
    .toBeCompared_new_s {
    display:block;
    background:blue;
    border:1px solid black;
    margin:2px;
    float:left;/**/
    }
    .toBeCompared_new_a {
    display:block;
    background:yellow;
    border:1px solid black;
    margin:2px;
    float:left;/**/
    }
    .preview_notice {
    float:left;
    }
 </style>


<!--  Colorbox code - begin -->
<link rel="stylesheet" href="colorbox/colorbox.css" />
<script src="overlay_2/jquery.min.js" type="text/javascript"></script>
<script src="colorbox/jquery.colorbox.js"></script> 



    <script>
        $(document).ready(function(){
        $("#colorbox, #cboxOverlay").appendTo('form:first');
            //Examples of how to assign the Colorbox event to elements
            $(".group1").colorbox({rel:'group1'});
            $(".group2").colorbox({rel:'group2', transition:"fade"});
            $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
            $(".group4").colorbox({rel:'group4', slideshow:true});
            $(".ajax").colorbox();
            $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
            $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
            $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
            $(".inline").colorbox({inline:true, width:"50%"});
            $(".callbacks").colorbox({
                onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
            });

            $('.non-retina').colorbox({rel:'group5', transition:'none'})
            $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

            //Example of preserving a JavaScript event for inline calls.
            $("#click").click(function(){ 
                $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                return false;
            });
        });
</script>
<!-- Colorbox code - end -->

<!-- Function nth occurrence within string - begin -->
<script>
function nth_occurrence (string, char, nth) {
var first_index = string.indexOf(char);
var length_up_to_first_index = first_index + 1;

if (nth == 1) {
    return first_index;
} else {
    var string_after_first_occurrence = string.slice(length_up_to_first_index);
    var next_occurrence = nth_occurrence(string_after_first_occurrence, char, nth - 1);

    if (next_occurrence === -1) {
        return -1;
    } else {
        return length_up_to_first_index + next_occurrence;  
    }
}
}


</script>
<!-- Function nth occurrence within string - end -->

<!-- Function show div elements - begin -->
<script>
$(document).ready(function(){

$(".ksa_check_k, .ksa_check_s, .ksa_check_a").click(function(){

if ($("#ksaChecks input:checkbox:checked").length > 0)
{

if ($('div.toBeCompared_pre').css('display') == 'none')
{
$('div.toBeCompared_pre').show();
}
if ($('div.preview_notice').css('display') == 'none')
{
$('div.preview_notice').show();
}
// any one is checked


}
else
{
// none is checked
if ($('div.toBeCompared_pre').css('display') == 'block') 
{
$('div.toBeCompared_pre').hide();
}
if ($('div.preview_notice').css('display') == 'block')
{
$('div.preview_notice').hide();
}
}

});

});
</script>
<!-- Function show div elements - end -->


<!-- Function to put 'preview' of selected ksa on page - begin -->
<script>
//code to put 'preview' of selected ksa on page
$(document).ready(function(){
$(".ksa_check_k").click({param1: "k", param2: "World"}, cool_function2);
$(".ksa_check_s").click({param1: "s", param2: "World"}, cool_function2);
$(".ksa_check_a").click({param1: "a", param2: "World"}, cool_function2);


function cool_function2(event){

var ksa_section=event.data.param1

var title = $(this).closest('.ksa_check_group').find('.ksa_check_'+ksa_section).attr("id")

var title_partial = title.substring(nth_occurrence(title,'_',2)+1,nth_occurrence(title,'_',3))

if($(this).prop('checked')){

var html = '<div id="' + title_partial + '"class="toBeCompared_new_' + ksa_section + '">' + title_partial + '</div>';



$('div.toBeCompared_' + ksa_section).append(html);

$('div.toBeCompared_' + ksa_section).show();

} else {
$('div[id="' + title_partial + '"]').remove();


}
}
});
</script>
<!-- Function to put 'preview' of selected ksa on page - end -->



<table>
<tr>
<td>

<p><a class='inline' href="#inline_content_k">Add/Edit KSAs</a></p>





     <div class="toBeCompared_pre" style='display:none'>The following KSAs have been added: </div>

     <div class="toBeCompared_k"></div>
     <div class="toBeCompared_s"></div>
     <div class="toBeCompared_a"></div>


     <div class="preview_notice" style='display:none'>Important - Data Has Not Been Saved Yet.  Please click on the 'Update' button below to save your work.</div>






<div style='display:none'>

        <div id='inline_content_k'  class='inline_box'>




<table>
<!-- ////////////// 'k' section -->
<tr>
<td>

<div class="ksa_check_group">

<input name="ksa_on_1k1_1" id="ksa_on_1k1_1" type="checkbox" value="1" class="ksa_check_k">

</div>

<input name="ksa_off_1k1_1" id="ksa_off_1k1_1" type="hidden" value="0" class="ksa_check_k">
</div>

</td>
</tr>
<tr>
<td>

<div class="ksa_check_group">

<input name="ksa_on_1k2_2" id="ksa_on_1k2_2" type="checkbox" value="1" class="ksa_check_k">

</div>

<input name="ksa_off_1k2_2" id="ksa_off_1k2_2" type="hidden" value="0" class="ksa_check_k">
</div>

</td>
</tr>
<!-- ////////////// 's' section -->
<tr>
<td>

<div class="ksa_check_group">

<input name="ksa_on_1s1_1" id="ksa_on_1s1_1" type="checkbox" value="1" class="ksa_check_s">

 </div>

<input name="ksa_off_1s1_1" id="ksa_off_1s1_1" type="hidden" value="0" class="ksa_check_s">
</div>

</td>
</tr>
<tr>
<td>

<div class="ksa_check_group">

<input name="ksa_on_1s2_2" id="ksa_on_1s2_2" type="checkbox" value="1" class="ksa_check_s">

</div>

<input name="ksa_off_1s2_2" id="ksa_off_1s2_2" type="hidden" value="0" class="ksa_check_s">
</div>

</td>
</tr>
<!-- ////////////// 'a' section -->
<tr>
<td>

<div class="ksa_check_group">

<input name="ksa_on_1a1_1" id="ksa_on_1a1_1" type="checkbox" value="1" class="ksa_check_a">

</div>

<input name="ksa_off_1a1_1" id="ksa_off_1a1_1" type="hidden" value="0" class="ksa_check_a">
</div>

</td>
</tr>
<tr>
<td>

<div class="ksa_check_group">

<input name="ksa_on_1a2_2" id="ksa_on_1a2_2" type="checkbox" value="1" class="ksa_check_a">

</div>

<input name="ksa_off_1a2_2" id="ksa_off_1a2_2" type="hidden" value="0" class="ksa_check_a">
</div>

</td>
</tr>
</table>


</div>

</div>

.inline_盒{
背景色：#FFCC00；
填充：10px；
}
奥德罗{
背景色：#eee；
}
.比较{
显示：块；
背景：红色；
}
.与美国相比{
显示：块；
背景：蓝色；
}
.比较{
显示：块；
背景：黄色；
}
.比较新的{
显示：块；
背景：红色；
边框：1px纯黑；
保证金：2倍；
浮动：左/**/
}
.比较新的{
显示：块；
背景：蓝色；
边框：1px纯黑；
保证金：2倍；
浮动：左/**/
}
.比较新的{
显示：块；
背景：黄色；
边框：1px纯黑；
保证金：2倍；
浮动：左/**/
}
.预告{
浮动：左；
}
$（文档）.ready（函数（）{
$（“#colorbox，#cboxOverlay”）.appendTo（'form:first'）；
//如何将Colorbox事件指定给元素的示例
$（“.group1”）.colorbox（{rel:'group1'}）；
$（“.group2”）.colorbox（{rel:'group2'，transition:'fade'}）；
$（“.group3”）.colorbox（{rel:'group3'，transition:'none'，width:'75%'，height:'75%}）；
$（“.group4”）.colorbox（{rel:'group4'，slideshow:true}）；
$（“.ajax”）.colorbox（）；
$（“.youtube”）.colorbox（{iframe:true，innerWidth:640，innerHeight:390}）；
$（“.vimeo”）.colorbox（{iframe:true，innerWidth:500，innerHeight:409}）；
$（“.iframe”）.colorbox（{iframe:true，宽度：“80%”，高度：“80%”）；
$（“.inline”）.colorbox（{inline:true，宽度：“50%”）；
$（“.callbacks”）.colorbox({
onOpen:function（）{alert（'onOpen:colorbox即将打开'）；}，
onLoad:function（）{alert（'onLoad:colorbox已开始加载目标内容'）；}，
onComplete:function（）{alert（'onComplete:colorbox已显示加载的内容'）；}，
onCleanup:function（）{alert（'onCleanup:colorbox已开始关闭过程'）；}，
onClosed:function（）{alert（'onClosed:colorbox已完全关闭'）；}
});
$（'.non-retina'）.colorbox（{rel:'group5'，transition:'none'}）
$（'.retina'）.colorbox（{rel:'group5'，transition:'none'，retinaImage:true，retinaUrl:true}）；
//为内联调用保留JavaScript事件的示例。
$（“#单击”）。单击（函数（）{
$（'#click'）.css（{“背景色”：“#f00”，“颜色”：“#fff”，“光标”：“继承”}）；
返回false；
});
});
函数第n次出现（字符串、字符、第n次）{
var first_index=string.indexOf（char）；
风险值长度从第一个指数到第一个指数=第一个指数+1；
如果（n=1）{
返回第一个索引；
}否则{
var string在第一次出现之后=string.slice（从第一次索引到第一次索引的长度）；
var next_occurrence=n次_occurrence（第一次_出现后的字符串_，char，n-1）；
如果（下一次出现==-1）{
返回-1；
}否则{
返回长度到第一个索引+下一个索引；
}
}
}
$（文档）.ready（函数（）{
$（“.ksa\u check\u k、.ksa\u check\u s、.ksa\u check\u a”）。单击（函数（）{
if（$（“#ksaChecks输入：复选框：选中”）.length>0）
{
if（$（'div.toBeCompared_pre'）.css（'display'）=='none'）
{
$（'div.toBeCompared_pre'）.show（）；
}
if（$（'div.preview_notice'）.css（'display'）=='none'）
{
$（'div.preview_notice'）.show（）；
}
//任何一个都被检查过
}
其他的
{
//没有被选中
if（$（'div.toBeCompared_pre'）.css（'display'）=='block'））
{
$（'div.toBeCompared_pre'）.hide（）；
}
if（$（'div.preview\u notice'）.css（'display'）=='block'））
{
$（'div.preview_notice'）.hide（）；
}
}
});
});
//将所选ksa的“预览”放在页面上的代码
$（文档）.ready（函数（）{
$（“.ksa_check_k”）。单击（{param1:k”，param2:World}，酷_函数2）；
$（“.ksa_check__s”）。单击（{param1:s”，param2:World}，酷_函数2）；
$（“.ksa_check_a”）。单击（{param1:“a”，param2:“World”}，酷_函数2）；
功能冷却功能2（事件）{
var ksa_section=event.data.param1
var title=$（this）.closest（'.ksa_check_group'）.find（'.ksa_check_'+ksa_section）.attr（“id”）
变量title\u partial=title.substring（第n次出现（title，2）+1，第n次出现（title，3））
if（$（this.prop（'checked'））{
var html=''+标题部分+''；
$（'div.toBeCompared_uu'+ksa_u部分）.append（html）；
$（'div.toBeCompared_u'+ksa_部分）.show（）；
}否则{
$（'div[id=“”+title_partial+'“]”）。删除（）；
}
}
});

已添加以下KSA：
重要信息-数据尚未保存。请单击下面的“更新”按钮保存您的工作。

要想在显示屏上找到您想要的东西并不难。您可以使用

float:left或
显示：内联块

我已经包括了一个小提琴的例子得到这种布局。该脚本还显示了如何对每行中的div进行排序。你可以把这个放进电脑里
$(function () {
    $(".row").each(function () {
        var children = $(".child", this).sort(function (a, b) {
            return $(a).text() > $(b).text() ? 1 : -1;
        });
        $(this).append(children);
    });
});