我無法使用CSS移動圖像文件

這是我第一次在這裏發佈。曾經有一段時間很長一段時間來到這裏，希望有人能帶領我走向正確的方向。我有一個圖像文件，我無法移動到任何地方。圖像文件位於div中，位於標籤中，我希望它位於div的右下角。我已經使用了上邊距和左邊距，但無法使用它總是坐在相同的位置。以下是有關問題區域的代碼。 Html部分後面跟着css部分。我無法使用CSS移動圖像文件

<div id = "container"> 
    <section id = "content"> 
     <article> 
      <div id ="monkey_img"><img src="images/cartoon-monkey_1.png" width="250" height="252"></div> 

     </article> 
    </section> 
    <aside id="sidebar"> 
     <p>Monkey</p> 
    </aside> 
</div> 
    <!--css--> 
    #content{ 
width: 600px; 
height: 475px; 
background-color: #FFF; 
border-style: solid; 
border-width: 2px; 
float:left; 
margin-right:30px; 
} 
    #monkey_img{ 
width:500px; 
height:425px; 
margin-top:100px; 
margin-left:100px; 
display:block; 
} 
    #container{ 
width:1000px; 
height:550px; 
margin:auto; 
margin-top:65px; 
} 
    #container p{ 
padding:15px; 

} 
    #sidebar{ 
width 275px; 
height:475px; 
background-color:#FFF; 
border-style:solid; 
border-width: 2px; 
margin-left:30px; 
overflow:auto; 
}

來源

2013-02-24 NoobCoder

JsFiddle for fiddling：http://jsfiddle.net/XemPh/ 你究竟在哪裏移動它？在Chrome中，圖像以'＃content'爲中心。 – ajp15243 2013-02-24 02:26:21

謝謝你的小提琴。 – isherwood 2013-02-24 02:42:31

你可能會想設置{position: relative}父，並{position: absolute}你想移動的元素。您可以根據需要設置頂部/右側/底部/左側。

http://jsfiddle.net/XemPh/2/

#monkey_img { 
    width:200px; 
    height:200px; 
    background-color: #eee; 
    position: relative; 
} 
#monkey_img img { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
} 

<div id="monkey_img"> 
    <img src="http://placehold.it/100x100" /> 
</div>

在這個例子中，我直接應用的樣式的形象，但你可以做形象的包裝和元素的父也。

來源

2013-02-24 02:32:33 isherwood

這是一個實際移動圖像的開始。但我希望它在父分區內。它就像在整個網頁的底部，我希望它在該特定div的右下角。我希望我可以張貼截圖，但我不能因爲分數不夠：[ – NoobCoder 2013-02-24 03:06:28

謝謝你的幫助，這一直困擾着我一天左右。必須將絕對位置添加到#container。非常感激。 – NoobCoder 2013-02-24 03:12:11

我無法使用CSS移動圖像文件

回答

相關問題