对齐3幅小图像

Question

我有3张150 to到150 to的图片，我想要对齐所有的设备。如果屏幕很大，那么这3幅图像应该均匀地间隔在可用宽度上，第二幅图像在中间。如果屏幕是中等大小的，那么第三个图像将下降并以可用宽度为中心。如果屏幕很小，那么第二和第三张图像就会下降(第三张在第二张下面)，并在可用宽度中居中，形成一条3幅图像的垂直线。我尝试过以下代码，但它不起作用吗？

<div style="text-align: center; width:100%">
<div style="float:left;">
    <img height="150" src="/images/source/ilustracion_guia_03.jpg" width="150" /></div>
<div style="display:inline-block;">
    <img height="150" src="/images/source/ilustracion_guia_07.jpg" width="150" /></div>
<div style="float:right;">
    <img height="150" src="/images/source/ilustracion_guia_04.jpg" width="150" /></div>
</div>

Answer 1

我在你的HTML上做了一些编辑：

<div class="allImgsConatainer">
<div class="imgContainer">
    <img height="150" src="/images/source/ilustracion_guia_03.jpg" width="150" /></div>
<div class="imgContainer">
    <img height="150" src="/images/source/ilustracion_guia_07.jpg" width="150" /></div>
<div class="imgContainer">
    <img height="150" src="/images/source/ilustracion_guia_04.jpg" width="150" /></div>
</div>

以及风格：

.allImgsConatainer{
  font-size:0;
  text-align:center;
}
.imgContainer{
    margin:0 0 20px;
}

@media only screen and (min-width: 320px) {
  .imgContainer{
    display:inline-block;
    width:50%;
  }
  .imgContainer:first-of-type{
      text-align:left;
    }
}

@media only screen and (min-width: 481px) {
    .imgContainer{
    width:33%;
  }
  .imgContainer:last-of-type{
      text-align:right;
    }
}

演示：https://jsfiddle.net/IA7medd/fL6u7Ljc/