以前使用Table排版,當一列有三個區塊時,Table會依最三個裡面內容元素最多的高度為主,並將其它二個區塊也一併撐高,但到了DIV版本時,若想要將二個DIV等高,除了將DIV原來的屬性變成table外,不然就是使用javascript,而最近梅干發現一個更簡單的方式,就能將多個DIV變成等高,同時還能套用在Bootstrap的網格系統中,並還支援各瀏覽器,因此也有在使用Bootstrap套件的朋友,現在也一塊來看看,如何將Bootstrap的網格系統中,也讓裡面的DIV變成等高。 Step1 在row層中,再包覆一個equalheight的DIV。 <div class="container"> <div class="row"> <div id="equalheight"></div> </div> </div> Step2 接著在equalheight的div中,開始使用Boostrap的網格。 <div id="equalheight"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> Step3 完成後,再每個col-md-*中,再用ehdiv包覆,並在div內就可加入內容。 <div class="col-md-4"> <div class="ehdiv"></div> </div> <div class="col-md-4"> <div class="ehdiv"></div> </div> <div class="col-md-4"> <div class="ehdiv"></div> </div> Step4 最後再加入style,這樣就大功告成囉。 .ehdiv{ #equalheight { Step4 完成後,在一般的桌機尺寸時,DIV則會等高,當變成切換成行動版尺寸時,區塊則會自動縮回原先的大小。 [範例預覽] [範例下載] |
|
来自: 覡先生藏书馆 > 《MR觋免费资源网》