在學習網頁設計中，遇到了需要將三張圖片排列到同一行中的情況。

使用典型的float命令分別讓這個三個裝有圖片的盒子進行浮動，并設置每個盒子的寬度(width)為33.3%

為了準確的控制各張圖片之間的間距，讓圖片的寬度鋪滿整個盒子的空間，并設置盒子的內邊距(padding)為10px。從而讓各張圖片之間的距離為20x。對應CSS代碼如下：

.boxer{

float:left;

width:33.3%;

padding:10px;

}

在運行過程中，出現了前兩張圖片排列在同一行，而第三張圖片排列到了下一行中的情況。錯誤的原因在于這里對width的理解錯誤。盒子模型中width對應的是可填充區域的寬度，而不包括內外邊距(padding，margin)的寬度。也就是說如果將盒子的width設置為33.3%，且將盒子的內邊距(padding)設置為10px，整個盒子的實際寬度(包括width、padding、margin)將超過33%.3。那么三個盒子加起來的寬度超過100%，顯然這是不可能的，所以第三個盒子被擠到了下一行。

除此之外，在設置盒子的width百分比時，也是相對于父盒子的width所對應的長度而不包括父盒子內外邊距的寬度。

總結

以上是生活随笔為你收集整理的html图片重叠在一排,【CSS】使用浮动进行图片排列却不能使图片在同一行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。