2

我正在尝试将包含图片的 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 的宽度和边距值，但结果仍然相同。

4

4 回答 4

1

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

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

}

于 2013-01-24T11:35:14.077 回答
1

添加float:left; in the #text样式开始工作....

#text {
    width: 375px;
    margin-left: 180px;
    font-weight: bold;
    float:left;
 }
于 2013-01-24T11:36:27.970 回答
0

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

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

第二个问题：你为什么用position:absolutewithmargin-left和 not一起使用left？

如果你使用left then，如果你给父母，它会从它的父母计算它position:relative。

于 2013-01-24T11:31:01.817 回答
0

您应该删除 position:absolute 或给出 position:relative to parent 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
 }

演示

于 2013-01-24T11:33:20.503 回答