0

这是我第一次在这里发帖。很长一段时间的粉丝每隔一段时间就会来这里,希望有人能引导我走向正确的方向。我有一个无法移动到任何地方的图像文件。图像文件位于一个 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;
}
4

1 回答 1

0

您可能希望{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-24T02:32:33.493 回答