在網(wǎng)頁制作中，圖片的橫排和縱排是常見的布局方式之一。在CSS中，我們可以通過一些簡(jiǎn)單的樣式設(shè)置實(shí)現(xiàn)圖片的橫排。下面我們來看一下具體的實(shí)現(xiàn)方法。 首先，在HTML中，我們需要在圖片外圍包裹一個(gè)容器，比如div。然后，在CSS中，給這個(gè)容器設(shè)置display:inline-block;屬性，將其轉(zhuǎn)化為行內(nèi)塊級(jí)元素。這樣，容器就可以和文本一樣橫向排列了。最后，再給圖片設(shè)置一些樣式，比如設(shè)置圖片的寬度，使其適應(yīng)容器的大小即可。 下面是一個(gè)用實(shí)例代碼來演示如何讓圖片橫著排列的例子：

<div class="wrapper">
<p>這是一張圖片:</p>
<img src="example.jpg" alt="example">
<p>這是一段文字。</p>
</div>
/*CSS*/
.wrapper {
display: inline-block;
}
img {
width: 200px;
}

上面的代碼中，通過將包裹圖片的div元素設(shè)置為inline-block，使其可以橫向排列。同時(shí)，給圖片設(shè)置200px寬度，使其適應(yīng)容器大小。 需要注意的是，由于inline-block會(huì)將元素間的空格顯示出來，所以在html中我們需要將圖片和文字放到同一行，以避免出現(xiàn)多余的空格。 通過以上的樣式設(shè)置，就可以輕松實(shí)現(xiàn)讓圖片橫著排列的效果了。