清除可變寬度父元素中的子元素的行

使用jQuery 1.6.2清除可變寬度父元素中的子元素的行

我在父級中有浮動div的可變數目。父可能有一個固定的寬度，但也可能不會。

我想使用jQuery來計算一行中的div數是多少，然後插入一個div，並將clear屬性設置爲兩者，以便孩子可以具有可變高度並且不會弄亂一切，而且父母可能具有可變寬度。

這是一個簡單的事情在標記或服務器端腳本做任何如果你知道div的寬度，如果你知道你在一排想要多少孩子 - 但如果一切是一個多一點液體？

是否有一個簡單的方法來做到這一點，或者我將不得不做一些工作，涉及所有的寬度和一些聰明的數學來決定在哪裏把清晰的div？

來源

2011-09-05 jammypeach

PHP的解決方案時，知道父div的寬度以及我想要連接多少個子div，如OP – jammypeach

試試這個：

樣的jQuery插件（不能想出一個更好的插件名稱）：

(function ($) { 
    $.fn.extend({ 
     addLineBreak: function (elementToInject) { 
      var minLeft = $(this).position().left; 

      return $(this).each(function() { 
       var position = $(this).position(); 
       if (position.left > minLeft && $(this).prev().position().left >= position.left) { 
        $(elementToInject).insertBefore(this); 
       } 
      }); 
     } 
    }); 
})(jQuery);

使用：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery</title> 
     <script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
     <script type="text/javascript" src="jquery.addLineBreak.js"></script> 
     <script type="text/javascript"> 
      $(function() { 
       // '.inner' is the selector for the child elements! 
       $('.inner').addLineBreak('<div class="clear"></div>'); 

       // on resize, remove the clear-elements, and inject new ones 
       $(window).resize(function() { 
        $('#tmp .clear').remove(); 
        $('.inner').addLineBreak('<div class="clear"></div>'); 
       }); 
      }); 
     </script> 

     <style type="text/css"> 
      body { 
       background: black; 
      } 

      .inner { 
       float: left; 
       margin: 5px; 
       padding: 5px; 
       border: 1px solid #efefef; 
      } 

      .clear { 
       clear: both; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="tmp"> 
      <?php for ($i = 0; $i < 25; $i += 1): ?> 
       <div class="inner" style="width: <?php echo rand(100, 150); ?>px; height: <?php echo rand(100, 150); ?>px"><?php echo $i; ?></div> 
      <?php endfor; ?> 
     </div> 
    </body> 
</html>

來源

2011-09-05 14:45:49 Yoshi

good answ呃，我會試試這個。謝謝 – jammypeach

清除可變寬度父元素中的子元素的行

回答

相關問題