在網頁開發過程中,經常會出現需要將一個div嵌套在另一個div中,并使其居中顯示的需求。這個需求其實可以通過jquery來輕松實現。
// html代碼 <div class="outer"> <div class="inner"> <p>這是一個嵌套在外層div中居中顯示的div</p> </div> </div> // jquery代碼 $(function(){ var outerWidth = $('.outer').width(); // 獲取外層div的寬度 var innerWidth = $('.inner').width(); // 獲取嵌套div的寬度 var marginLeft = (outerWidth - innerWidth)/2; // 計算需要設置的margin-left值 $('.inner').css('margin-left', marginLeft); // 設置嵌套div的margin-left值 });
以上代碼將一個寬度為100%的外層div中嵌套一個寬度為自適應的div,并通過jquery計算出需要設置的margin-left值,使其在外層div中居中顯示。
需要注意的是,如果外層div的寬度不是固定值,而是通過其他方式動態計算得出的,那么在計算內層div的margin-left值時也要根據實際情況來進行計算。