Question

我有3张150px乘150px的图像，我想在所有设备中居中对齐。如果屏幕较大，则3个图像应在可用宽度上均匀分布，第2个图像位于中心。如果屏幕是中等大小，则第三个图像将下拉并以可用宽度为中心。如果屏幕较小，则第二和第三图像将下降（第三图像在第二图像下方）并以可用宽度为中心，形成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/

响应地对齐3个小图像

1 个答案: