我有类似于以下代码:
<p>This is paragraph 1. Lorem ipsum ... </p> <p>This is paragraph 2. Lorem ipsum ... </p> <p>This is paragraph 3. Lorem ipsum ... </p> <p>This is paragraph 4. Lorem ipsum ... </p> <p>This is paragraph 5. Lorem ipsum ... </p> <p>This is paragraph 6. Lorem ipsum ... </p>
我希望在没有标记的情况下使此文本流入两列(左侧为1-3,右侧为4-6)。我不愿意使用a添加列的原因<div>是客户端通过WYSIWYG编辑器输入了此文本,因此我注入的任何元素很可能在以后或莫名其妙地被杀死。
<div>
使用jQuery
创建第二列,然后将所需的元素移到该列中。
<script type="text/javascript"> $(document).ready(function() { var size = $("#data > p").size(); $(".Column1 > p").each(function(index){ if (index >= size/2){ $(this).appendTo("#Column2"); } }); }); </script> <div id="data" class="Column1" style="float:left;width:300px;"> <!-- data Start --> <p>This is paragraph 1. Lorem ipsum ... </p> <p>This is paragraph 2. Lorem ipsum ... </p> <p>This is paragraph 3. Lorem ipsum ... </p> <p>This is paragraph 4. Lorem ipsum ... </p> <p>This is paragraph 5. Lorem ipsum ... </p> <p>This is paragraph 6. Lorem ipsum ... </p> <!-- data Emd--> </div> <div id="Column2" style="float:left;width:300px;"></div>
更新:
或者 因为现在的要求是使它们的大小相等。我建议使用预构建的jQuery插件:ColumnizerjQuery插件