jQuery是目前最流行的JavaScript庫之一,它把JavaScript封裝了起來,讓程序員能夠更加方便地操作DOM和CSS。其中一個比較常用的操作就是讓兩個或多個DIV并排顯示。
要實現(xiàn)DIV并排顯示,我們可以使用jQuery的css()方法來改變DIV的樣式屬性,比如改變它們的float、display和width屬性等。
// 代碼示例 $(document).ready(function(){ // 把兩個DIV都設(shè)置為inline-block $("#div1").css("display", "inline-block"); $("#div2").css("display", "inline-block"); // 把第一個DIV設(shè)置為float:left $("#div1").css("float", "left"); // 設(shè)置寬度 $("#div1").css("width", "50%"); $("#div2").css("width", "50%"); }); <!-- HTML代碼示例 --><div id="div1">這是第一個DIV</div><div id="div2">這是第二個DIV</div>
上面的代碼就是一個簡單的實現(xiàn)DIV并排顯示的例子,首先我們選擇兩個DIV元素,然后把它們的display屬性設(shè)置為"inline-block",這樣它們就可以水平排列了。接著給第一個DIV設(shè)置float:left,這樣第二個DIV就會自動排在它的右邊。最后設(shè)置寬度為50%,這樣兩個DIV就會平分一行。
通過以上的例子,相信大家已經(jīng)掌握了如何使用jQuery實現(xiàn)DIV并排顯示的方法了。這種方法在實際開發(fā)中非常實用,特別是在需要展示圖文混排的網(wǎng)站頁面中,都可以使用這種技術(shù)來提升頁面的美觀性。