CSS可以很方便地將多個圖片并排顯示,只需幾行簡單的代碼即可實現。以下是一些實現方式:
/* 方法一:使用float屬性 */ img { float: left; margin-right: 10px; /* 圖片之間的間距 */ } /* 方法二:使用display:inline-block屬性 */ img { display: inline-block; margin-right: 10px; } /* 方法三:使用flexbox布局 */ .container { display: flex; flex-wrap: wrap; } img { margin-right: 10px; }
以上三種方法均可實現將多個圖片并排顯示的效果,只不過實現方式有所不同。如果想要控制圖片的大小,可以加入max-width或max-height屬性進行控制。
在實際應用中,可以根據具體情況選擇使用哪種方式。需要注意的是,多個并排圖片的寬度之和不能超過其父元素的寬度,否則會出現換行的現象。