在網(wǎng)頁(yè)制作中，經(jīng)常需要把文字和圖片進(jìn)行排列組合，讓頁(yè)面更加生動(dòng)多彩。下面介紹用CSS實(shí)現(xiàn)文字和圖片并排顯示的方法。

/*CSS代碼*/
.container {
display: flex;
align-items: center;
}
.image {
width: 200px;
}
.text {
margin-left: 20px;
}

以上為CSS代碼，下面解釋一下各個(gè)屬性的含義：

/*CSS代碼解釋*/
.display {
display: flex;  /*使用flex布局*/
align-items: center;  /*垂直居中*/
}
.image {
width: 200px;  /*設(shè)置圖片寬度*/
}
.text {
margin-left: 20px;  /*文本距離圖片的距離*/
}

制作時(shí)，首先需要在HTML中定義一個(gè)包裹元素，一般為div。

這是一段文本，與圖片并排顯示。

以上HTML代碼中，使用了img標(biāo)簽插入圖片，p標(biāo)簽插入文字，并為它們添加了class類。這些類與CSS代碼相對(duì)應(yīng)，控制它們的顯示效果。

另外需要注意的是，圖片和文字的寬度和高度需要根據(jù)實(shí)際需求自行設(shè)置。這里僅僅給出了一個(gè)示例。

與此類似的還有其他的排列方式，如float屬性等。選擇不同的方式可以實(shí)現(xiàn)不同的效果。以上就是關(guān)于CSS文字和圖片并排顯示的簡(jiǎn)單介紹，希望對(duì)大家有所幫助。