窗口更改时更改图像HTML的位置

Question

这可能比我听起来更容易。

基本上我有6个图像，每个图像下面都有一个按钮...... 这就是它的样子：

我只是这样放置它们：

<img src="Image.png" width="350" height="208" style="margin: 0px 16px">
<img src="Image.png.png" width="350" height="208" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">

在典型的浏览器窗口中看起来很棒。但是，当我使窗口变窄时，它会像这样：

这有助于我列出我的图像/按钮。

但是当窗口缩小时我希望它们看起来像这样：

无论窗口有多宽，我都可以添加到我的基本HTML中以保持其良好的格式？

理想情况下，我希望从最快的2 x网格，到第一张和最终图像中的x网格一样。

向正确的方向推进将是惊人的。

我确实在Stackoverflow上看了HERE，但它更复杂，只适用于正方形。

我期待着你的帮助：D

更新

https://jsfiddle.net/du6Lu4ge/

看起来像这样：

调整大小时，看起来像这样：

：（

Answer 1

我会做这样的事情：

https://jsfiddle.net/du6Lu4ge/3/

希望它可以帮助你！

我所做的是将image和button包裹在以.img-wrapper

为样式的div display: inline-block中

Answer 2

此示例正在完全响应，您可以简单地编辑css并添加视口。

html：

<div class="imageContainer">
  <div class="imageBlock">
    <!--<img class="image" src="image.png">-->
    <div class="image">
       your image
    </div>
  </div>
  <div class="buttonBlock">
    <!--<img class="button" srck="button.png">-->
    <div class="button">
       your button
    </div>
  </div>
</div>
<div class="imageContainer">
  <div class="imageBlock">
    <!--<img class="image" src="image.png">-->
    <div class="image">
       your image
    </div>
  </div>
  <div class="buttonBlock">
    <!--<img class="button" srck="button.png">-->
    <div class="button">
       your button
    </div>
  </div>
</div>
<div class="imageContainer">
  <div class="imageBlock">
    <!--<img class="image" src="image.png">-->
    <div class="image">
       your image
    </div>
  </div>
  <div class="buttonBlock">
    <!--<img class="button" srck="button.png">-->
    <div class="button">
       your button
    </div>
  </div>
</div>
<div class="imageContainer">
  <div class="imageBlock">
    <!--<img class="image" src="image.png">-->
    <div class="image">
       your image
    </div>
  </div>
  <div class="buttonBlock">
    <!--<img class="button" srck="button.png">-->
    <div class="button">
       your button
    </div>
  </div>
</div>

的CSS：

.imageContainer {
  width: 400px;
  display: inline-block; 
}

.imageContainer .imageBlock {
   display: inline-block;    
}

.imageContainer .imageBlock .image {
  display: inline-block;
  width: 400px;
  height: 300px;
  background-color: darkred;  
}

.imageContainer .buttonBlock {
  display: inline-block;
  text-align: center;
}

.imageContainer .buttonBlock .button {
  display: inline-block;
  width: 300px;
  margin: 10px 50px; /* simple way to center it */
  height: 100px;
  background-color: cyan;
}

您可以在this digital ocean blog post

上进行测试

编辑：如果你需要一个2行网格，只需在这个html中放置一个容器，用max-widht: 801px设置样式;