CSS是一種用于美化網站的樣式語言,其中包含了豐富的技巧和技巧。如果您想要將兩張圖片并排平鋪在網頁上,那么可以使用CSS來實現這個效果。
代碼如下: .img-wrap { display: flex; flex-wrap: wrap; } .img-wrap img { width: 50%; height: auto; padding: 5px; box-sizing: border-box; }
以上代碼使用Flexbox布局,在容器上設置了flex-wrap:wrap 屬性,這樣當圖片的寬度超過容器寬度時,會自動換行。同時,每張圖片還設置了padding屬性,以便在圖片之間留出一些空間。
當然,您也可以通過使用Grid布局來實現這個效果,如下所示:
代碼如下: .img-wrap { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; } .img-wrap img { width: 100%; height: auto; }
以上代碼使用Grid布局來實現,容器上設置了grid-template-columns屬性,用來確定列的數量和占比。同時,也設置了grid-gap屬性來控制圖片之間的間距。
總的來說,使用CSS來實現圖片并排平鋪是非常簡單的。您只需要選擇一種布局方式,根據需要進行調整即可。