Question

我正在使用jquery和php开发新闻源。我正在使用2 div。这里如果主div到达底部它应该自动换行。

<html>
  <div id="main">
     <?php
     for($i=0;$i<15;$i++)
     {
     ?>
     <div id="sub">hai</div>
     <?php
     }
     ?>
  </div>
</html>

脚本：

<script src="at/js/jquery.js"></script>
<script>
$(document).ready(function(){
var n = $("#main").css("height","100%");
if (n) {
    $("#sub").appendTo("#main");
}
});
</script>

风格：

<style>
#sub{
   border:solid 2px #000000;
   height:30%;
   width:20%;
}
</style>

Answer 1

您可以使用CSS clear:left;和float:left;属性解决此问题。

检查 demo jsFiddle

HTML

 <div id="main">
     <div id="sub">hai</div>
     <div id="sub">hai</div>
      <div id="sub">hai</div>
     <div id="sub">hai</div>
  </div>

CSS

#sub{
   border:solid 2px #000000;
   height:30%;
   width:20%;
   clear:left;
   float:left;
}

JQuery的

$(document).ready(function(){
var n = $("#main").css("height","100%");
if (n) {
    $("#sub").appendTo("#main");
}
});

您也可以动态分配css属性，

检查 demo jsFiddle

JQuery的

$(document).ready(function(){
    var n = $("#main").css("height","100%");
    if (n) {
        $("#sub").appendTo("#main");
        $("#sub").css({
            border: "solid 2px #000000",
            height: "30%",
            width: "20%",
            clear: "left",
            float: "left"      
        });
    }
});

Answer 2

使用prependTo jQuery函数代替appendTo

当div到达底部时，如何连续追加div左侧？

2 个答案:

HTML

CSS

JQuery的

JQuery的