HTML圖片橫排排列，使用div和CSS實(shí)現(xiàn)

在HTML中，我們可以使用div元素來創(chuàng)建一個容器，然后利用CSS來設(shè)置圖片的排列方式，要實(shí)現(xiàn)圖片的橫排排列，我們可以使用CSS的display屬性來設(shè)置圖片為行內(nèi)元素，這樣圖片就會按照從左到右的順序排列。

下面是一個簡單的示例代碼：

HTML部分：

<div class="image-container">
  <img src="image1.jpg" alt="圖片1" />
  <img src="image2.jpg" alt="圖片2" />
  <img src="image3.jpg" alt="圖片3" />
</div>

CSS部分：

.image-container {
  display: flex;
  justify-content: flex-start;
}
.image-container img {
  max-width: 100px;
  height: auto;
}

在這個示例中，我們創(chuàng)建了一個名為image-container的div容器，并將圖片作為子元素添加到該容器中，我們使用CSS的display屬性將容器設(shè)置為flex布局，這樣圖片就可以按照從左到右的順序排列了，我們還設(shè)置了圖片的max-width為100px，高度自動縮放，以保持圖片的原始比例。

通過這種方法，我們可以輕松地實(shí)現(xiàn)HTML圖片的橫排排列，使網(wǎng)頁更加美觀和易用。