如何阻止html图片移动？

-1

当我调整浏览器大小或尝试不同的分辨率时，我的img的举动 - 图像保持分组在相同的位置，即一个停留在另一个下方，但当分辨率发生变化或浏览器放大或缩小时，它们全都移动到左侧。代码：如何阻止html图片移动？

<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>

非常感谢提前！

来源

2015-09-26 Jscomputing Services

@ShaminderSAujla - 虽然你绝对正确，但这个评论是没有帮助的。 – aphextwix

@aphextwix，只是想传达的问题，也许搞砸的代码是一个问题，我不能写我自己正确的代码，因为它不清楚OP正在试图建立什么。 –

的确，你想做什么？请明确点。用[jsfiddle]（http://jsfiddle.net/）代码为HTML | CSS | jquery –

这里是一个可能的布局：

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内插入，使您的清洗up 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>

来源

2015-09-26 12:30:24 aphextwix

好吧你没有F ******太棒了！非常感谢你的工作！ –

@JscomputingServices - 很高兴为你工作。 – aphextwix

如何阻止html图片移动？

回答

相关问题