照片和文字一排的布局在網頁設計中經常用到。這種布局可以展示圖片或視頻，同時配合文字作為說明或說明。如何用CSS實現這種布局呢？ 首先，我們需要在HTML中添加一個div元素，并在其中放置圖像和文本，如下所示：

<div class="image-and-text">
<img src="image.jpg" alt="圖片">
<p>這是一張漂亮的圖片</p>
</div>

接下來，我們可以使用CSS設置這個元素的樣式：

.image-and-text {
display: flex;
align-items: center;
}
.image-and-text img {
margin-right: 20px;
width: 200px;
height: 150px;
}

在這個樣式中，我們使用了flex布局來將圖像和文本水平對齊。我們還使用了align-items屬性，使它們垂直居中。我們還使用了margin-right屬性來將圖像與文本分隔開，并設置了圖像的寬度和高度。 最后，我們為文本添加樣式：

.image-and-text p {
font-size: 18px;
line-height: 1.5;
}

在這個樣式中，我們使用了font-size屬性來設置文本的大小，并使用了line-height屬性來設置文本之間的行距。 我們可以嘗試更改這些樣式，使其符合我們的設計要求。通過使用這種布局，我們可以在網頁上精美地展示圖片和文本。