在現(xiàn)代網(wǎng)頁設(shè)計(jì)中，CSS是一種非常重要的語言。CSS可以幫助我們實(shí)現(xiàn)各種各樣美觀的設(shè)計(jì)，其中之一就是一行四張照片的布局。接下來，我們將用代碼來實(shí)現(xiàn)這個布局。

/* HTML代碼 */
<div class="row">
<img src="photo1.jpg" alt="照片1">
<img src="photo2.jpg" alt="照片2">
<img src="photo3.jpg" alt="照片3">
<img src="photo4.jpg" alt="照片4">
</div>
/* CSS代碼 */
.row {
display: flex;
justify-content: space-between;
align-items: center;
}
.row img {
flex: 1 1 20%;
margin: 0 10px;
max-width: 100%;
}

在HTML代碼中，我們使用了一個div元素，并給他一個class名字叫做"row"。在這個div中，我們添加了四個img元素，并賦予它們不同的圖片地址、alt屬性值以及寬高比。

在CSS代碼中，我們使用了flex布局來實(shí)現(xiàn)這個照片布局。我們先讓外層div元素使用display:flex將它變成一個彈性布局容器。

我們使用justify-content屬性來讓照片左右均勻分布，這里選擇了space-between，也就是在容器內(nèi)隨著元素的增加間隔會越來越大。

我們同時使用了align-items對照片的對齊進(jìn)行調(diào)整，這里選擇了center，即讓照片保持垂直和水平方向都居中。

最后，我們使用了.row img的選擇器，對每個照片進(jìn)行樣式調(diào)整。我們使用flex屬性讓每個照片的寬度都可以根據(jù)剩余空間而自適應(yīng)，也就是說照片可以根據(jù)容器的寬度自適應(yīng)大小。我們使用margin屬性進(jìn)行左右間距的調(diào)整，同時使用max-width屬性防止照片超出容器的寬度。

以上就是一行四張照片的CSS代碼實(shí)現(xiàn)方法，試試在你的網(wǎng)站上創(chuàng)作吧！