子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之外

回答

相關問題