使用CSS來設計一個美輪美奐的頁面布局是我們網頁設計師的日常任務。在這過程中，經常會用到圖片作為頁面的主要元素，在使用CSS將圖片排列時，經常會遇到排列發生位移的問題。那么，該如何解決這個問題呢？ 首先我們需要理解，圖片排列發生位移的原因是由于不同的圖片大小和瀏覽器的兼容性不同，導致圖片所在的位置和大小發生了變化。因此，在使用CSS規劃圖片布局時，我們首先要考慮一下圖片的大小和在頁面中的位置。這樣可以保證不同大小和兼容性的瀏覽器都可以正確地顯示圖片，并且排列不會發生位移。 下面，我們可以看一些簡單的代碼實例來幫助我們更好地理解。

上述代碼是一個包含三個圖片的圖片容器，用來展示我們如何在容器中使用CSS來規劃圖片布局。

/*CSS代碼*/
.image-container {
display: flex;
justify-content: space-between;  
align-items: center;
}
.image-container img {
width: 30%;
height: auto;
}

在CSS中，我們使用了flexbox來排列圖片，并使用了兩個重要的CSS屬性：justify-content和align-items。 其中，justify-content屬性是指圖片在容器中的水平排列方式，space-between表示各個圖片之間的距離是相等的。align-items屬性是指圖片在容器中的垂直排列方式，center表示圖片在垂直方向上是居中對齊的。 最后，我們為每張圖片指定了寬度為30%的值，并且高度使用了auto自動調整，這樣不同尺寸的圖片都能夠正確地顯示。 總之，當我們使用CSS來排列圖片時，需要注意圖片的尺寸和位置，特別是考慮到瀏覽器的兼容性。同時，我們可以使用flexbox等CSS屬性來優化圖片的布局，以保證圖片不會發生位移。