[分享]css中并排三张图

CSS中的布局是网页设计中非常重要的一部分，其中三张并排的图片布局可以让网页更加美观大气，为了实现这个布局，我们需要运用CSS的一些技巧。/CSS代码/ .container { display: f...

CSS中的布局是网页设计中非常重要的一部分，其中三张并排的图片布局可以让网页更加美观大气，为了实现这个布局，我们需要运用CSS的一些技巧。

/*CSS代码*/

.container {
  display: flex;  /*使用flex布局，方便进行内容排列*/
  flex-direction: row;  /*设置flex排列方向为横向*/
  justify-content: space-between;  /*让图片之间有相等的间距，让布局更加美观*/
}

.item {
  width: 30%;  /*设置每个图片占据的宽度*/
}

.item img {
  display: block;  /*让图片块级展示，方便处理CSS样式*/
  max-width: 100%;  /*让图片在父容器中自适应宽度，不会溢出*/
} 

上面的代码中，我们创建一个容器层（container），将容器层的子元素通过flex布局（display: flex）实现横向并排的排列方式（flex-direction: row），同时，通过设置让图片之间有相等的间距（justify-content: space-between）。

每张图片通过设置width属性控制占据的宽度（.item {width: 30%}），图片CSS样式通过设置图片为块级展示（display: block）实现，同时让图片自适应宽度（max-width: 100%）。

通过上述的CSS布局方式，我们可以实现并排三张图的效果，使得网页布局更加美观大气。