使用Bootstrap框架排版來跑php迴圈,除非是要做瀑布流,一定會遇到以下的問題,就是每個div的高度都不一致,導致區塊跑位的情況 這樣不是很奇怪嗎?解決方法就使用js的each取得nth-child引響範圍內區塊高度的最大值,再輸出到範圍內的全部區塊,例如每列有三個區塊,迴圈跑三次共三列,程式就會以每三個區塊取值比對一次抓出最大高度在輸出,這樣每一列的高度都會一致,不會再發生區塊跑位的情況。 方法如下: html結構 <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> 呼叫function <script>sameheightfunction();</script> js-code 吧以下的code放在頁面引入的js檔中 //區塊高度相等 function sameheightfunction() { var $column=3; //欄位數 var $range = $column - 1; var $sections = $('.col-md-4'); //區塊class $sections.filter(':nth-child(' + $column + 'n-' + $range + ')').each(function() { var $this = $(this), $els = $this.nextAll(':lt(' + $range + ')...