Question

我正在尝试将包含图片的div放入另一个div中。这个父母 div还有另外两个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的宽度和margin-left值，但结果仍然相同。

Answer 1

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

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

}

Answer 2

添加float:left; in the #text样式获取工作....

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

Answer 3

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

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

第二个问题：为什么您将position:absolute与margin-left一起使用而不是left？

如果您正在使用左侧，那么如果您将position:relative提供给parrent，它将从它的父级计算它。

Answer 4

您应该删除位置：绝对位置或给位置：相对于父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

儿童div出现在父母div之外

4 个答案: