子div出现在父div之外

我想将包含图片的div放入另一个div。这位父母 div也有其他2个div完美工作。我的父母和孩子的div HTML代码：子div出现在父div之外

 <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的宽度和margin-left值，但它仍然出现了相同的结果。

来源

2013-01-24 MorganJ

在哪里你想看看吗？ –

它正在做你告诉他要做的事。但也许我只是不明白你打算做什么（可能会添加图片？）

第一个问题：为什么你在图像上使用position:absolute？这将其从流中移除。

第二个问题：为什么你使用position:absolute加上margin-left而不是left？

如果您使用的是左侧，那么如果您将position:relative交给了parrent，它将从它的父级计算出来。

来源

2013-01-24 11:31:01

要么你应该删除的位置：绝对或给位置：相对于父div。

为什么有巨大的利润率？

#contentsWrapper { 
    width: 800px; 
    margin-left: 10px; background:red; position:relative; overflow: hidden; height:auto 
} 

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

DEMO

来源

2013-01-24 11:33:20 Sowmya

绝对定位从容器中移除。尝试这样的事情，而不是：

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

}

来源

2013-01-24 11:35:14

添加float:left; in the #text风格找到工作....

#text { 
    width: 375px; 
    margin-left: 180px; 
    font-weight: bold; 
    float:left; 
}

来源

2013-01-24 11:36:27 Pandian

子div出现在父div之外

回答

相关问题