html - 子 div 出现在父 div 之外

Question

我正在尝试将一个包含图片的 div 放入另一个 div 中。这位家长div 还有 2 个其他 div，它们可以完美地工作。我的父子 div 的 html 代码是:

     <div id="contentsWrapper">
     <div><ul id="sideNav">
         <li><a href="linkone.html" id="linkone">One</a></li>
         <li><a href="linktwo.html" id="linktwo">Two</a></li>
     </ul></div>

     <div id="text">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <br />
         sed diam nonummy  nibh euismod tincidunt ut laoreet dolore magna.
     </div>

     <div id="picture">
          <img src="picture.jpg" alt="picture" height="200" width="200" />
     </div>
</div>

CSS代码是

#contentsWrapper {
    width: 800px;
    margin-left: 10px;
}

#sideNav {
    padding: 0;
    list-style: none;
    width: 160px;
    margin-top: 0px;
    border-bottom: 1px dashed #999;
    position: absolute;
 }
 #text {
    width: 375px;
    margin-left: 180px;
    font-weight: bold;
 }
 #picture {
    position: absolute;
    width: 225px;
    margin-left: 575px;
    background-color: #FFFF00;
 }

但这总是将图片放在屏幕左侧的正确位置，但在 contentsWrapper div 下方。我试过只使用文本并更改图片 div 的宽度和边距左侧值，但结果仍然相同。

Answer 1

绝对定位将其从容器中移除。尝试这样的事情:

#picture {
width: 225px;
float:right;
background-color: #FFFF00;