在網頁設計中，圖片和文字的布局顯得非常重要。

在CSS中，我們可以使用多種方式來布局圖片和文字，下面我們將介紹幾種最常見的布局方法。

/*第一種方法：使用浮動來布局*/
img {
float: left;
margin-right: 10px;
}
p {
overflow: hidden; /*清除浮動的影響*/
}

在上述代碼中，我們使用了浮動來將圖片浮動到文字的左邊，并設置了一定的間距，這里使用的是10px。然后我們加了一個overflow:hidden的屬性，這是為了清除浮動的影響，從而保持整個布局的穩定性。

/*第二種方法：將圖片作為背景*/
div {
background-image: url(image.jpg);
background-repeat: no-repeat;
padding-left:100px;
}

在上述代碼中，我們將一張圖片作為一個div的背景，并設置了相應的屬性，將背景圖片設置為不重復。之后我們設置了padding-left屬性使文字不會緊貼邊框，從而呈現出了更加美觀的效果。

/*第三種方法：使用Flexbox*/
.container {
display: flex;
align-items: center; /*垂直居中*/
}
.container img {
margin-right: 10px;
}

在上述代碼中，我們使用flexbox布局，將圖片和文字放在一個容器中。使用了align-items屬性使圖片和文字垂直居中。然后我們設置了一個margin來讓布局的結構更加美觀。

這三種方法都是非常普遍的布局方法，但在實際的布局中，我們需要根據具體情況使用不同的方法，才能布局出更加實用和美觀的網頁。