在網頁設計中,經常出現需要讓多張圖片在同一行顯示的情況,CSS提供了多種方法實現此目的。
img { display: inline-block; margin-right: 10px; }
我們可以使用CSS的display:inline-block
屬性來讓圖片在同一行顯示。同時,通過適當的margin
屬性可以調整不同圖片之間的間距。
如果需要讓圖片寬度自適應當前容器的寬度,可以使用width:100%
屬性:
img { display: inline-block; width: 100%; max-width: 200px; height: auto; margin-right: 10px; }
注意,上面的代碼中使用了max-width
屬性來限制圖片在容器中的最大寬度。這是為了避免圖片過大導致在移動設備上顯示不完全。
如果需要讓圖片按照固定大小顯示,可以使用width
和height
屬性:
img { display: inline-block; width: 200px; height: 150px; margin-right: 10px; }
通過以上幾種方法,我們可以輕松地實現讓多個圖片在同一行顯示的效果。
上一篇css讓圖片變模糊
下一篇mysql多主多從 HA