Question

这是我第一次在这里发帖。很长一段时间，粉丝偶尔来到这里，希望有人能带领我走向正确的方向。我有一个我无法移动到任何地方的图像文件。图像文件位于div中，div位于div的右下角。我使用了上边距和左边距无济于事它总是坐在同一个位置。以下是与问题区域相关的代码。 Html部分后跟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;
}

Answer 1

您可能希望在父级上设置{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>

在此示例中，我已将样式直接应用于图像，但您也可以使用图像的包装器和该元素的父级。

我无法使用css将图像文件移动到任何地方

1 个答案: