Question

当我调整浏览器大小或尝试不同的分辨率时，我的移动 - 图像保持分组在相同的位置，即一个停留在另一个之下但是当分辨率更改或浏览器放大时它们都向左移动或出。代码：

    <a class="popup-with-zoom-anim" href="#trimmings">
    <h3 style="width:200px;  margin-left:620px;  border-radius:5px; margin-top:-110px; position:relative;"><font color="black"> Trimmings & tassels</h3>


  <img  alt="trimmings" id="trimmingslink" style="width:200px; margin-left:610px;              margin-top:-0px; border-radius:5px; position:relative;;" src="img/interiors/Trimmings&Tassels3.jpg">
  </font>
    </div></a>
    </div>

    <a class="popup-with-zoom-anim" href="#tracksandpoles">
    <h3 style="width:200px; margin-left:985px; margin-top:-295px; margin-bottom:20px;  border-radius:5px; " src="img/interiors/tracks&poles.jpg"><font color="black">Tracks & poles</h3>

  <img alt="tracks and poles" id="trackslink" style="width:200px; margin-left:950px; margin-bottom:3px;  border-radius:5px; " src="img/interiors/tracks&poles.jpg">
  </font>
  </div></a>

<a class="popup-with-zoom-anim" href="#wallcoverings">
    <h3 ><font color="black">Wall coverings</h3>
  <img alt="wall coverings" id="wallcoveringslink" style="width:200px;  margin-bottom:3px; margin-left:11.5px; border-radius:5px; " src="img/interiors/wallcoverings.jpg">
  </font>
  </div></a>

<a class="popup-with-zoom-anim" href="#fabrics">
<h3 ><font color="black">Fabrics</h3>
  <img alt="fabrics"  id="fabricslink" style="width:200px; margin-left:11.5px; margin-bottom:3px; border-radius:5px; " src="img/interiors/Fabric2.jpg">
    </font>
    </div></a>

    <a class="popup-with-zoom-anim" href="#Decorative">
<h3 ><font color="black">Decorative antiques</h3>
  <img alt="antiques" style="width:200px; margin-left:11.5px; margin-bottom:3px; border-radius:5px; id="interiorslink6" "src="img/interiors/Decorative2.jpg">
  </font>
  </div></a>

非常感谢提前!!!

Answer 1

这是一种可能的布局：

<强> HTML

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<强> CSS

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.item {
    margin:2%;
    width: 46%;
    background: red;
    height: 100px;
}

因此，您的每个popup-with-zoom-anim部分都可以插入item div中，使您清理过的HTML看起来像这样：

<div class="item">
    <a class="popup-with-zoom-anim" href="#fabrics">
       <h3 >Fabrics</h3>
       <img alt="fabrics"  id="fabricslink" src="img/interiors/Fabric2.jpg">
    </a>
</div>

如何阻止html图像移动？

1 个答案: