CSS 图片横向排列实现代码

首先，需要明确实现横向排列的图片是通过CSS样式来完成的。以下是一个基本的实现横向排列的代码示例：

.container {
  display: flex;
  flex-wrap: wrap;
}

.image {
  width: 200px;
  height: 200px;
  margin: 10px;
}

解释一下样式的每个属性：

• display: flex; 使容器成为一个弹性布局容器，可以对其中的元素进行灵活的排列布局
• flex-wrap: wrap; 使弹性盒子在必要时进行换行
• width: 200px; 控制图片的宽度为200px
• height: 200px; 控制图片的高度为200px
• margin: 10px; 控制图片的边距为10px

其次，结合实例说明具体如何实现。

示例1

一个实现横向排列的图片网格布局，每行放4张图片。

<div class="container">
  <img src="image1.jpg" alt="" class="image">
  <img src="image2.jpg" alt="" class="image">
  <img src="image3.jpg" alt="" class="image">
  <img src="image4.jpg" alt="" class="image">
  <img src="image5.jpg" alt="" class="image">
  <img src="image6.jpg" alt="" class="image">
  <img src="image7.jpg" alt="" class="image">
  <img src="image8.jpg" alt="" class="image">
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.image {
  width: 25%;
  height: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

以上代码中的width: 25%意味着每行放4张图片，每个图片占据一行的1/4宽度。

示例2

一个实现横向排列的导航栏，每个导航项由一个图片和一个文字组成。

<nav class="nav">
  <a href="#" class="item">
    <img src="icon1.png" alt="" class="icon">
    <span class="text">首页</span>
  </a>
  <a href="#" class="item">
    <img src="icon2.png" alt="" class="icon">
    <span class="text">新闻</span>
  </a>
  <a href="#" class="item">
    <img src="icon3.png" alt="" class="icon">
    <span class="text">客户端</span>
  </a>
  <a href="#" class="item">
    <img src="icon4.png" alt="" class="icon">
    <span class="text">视频</span>
  </a>
</nav>

.nav {
  display: flex;
  justify-content: space-between;
}

.item {
  display: flex;
  align-items: flex-end;
}

.icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.text {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  padding: 0;
}

以上代码中的.icon和.text分别对应图片和文字的样式，.item对应每个导航项的样式，而.nav则是导航栏整体的样式，采用了justify-content: space-between;使每个导航项之间的距离相等。