如何阻止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圖片移動？

回答

相關問題