圖像脫離盒子

你好，我是新來的HTML & css。我開始製作一個盒子，我希望在盒子的右側顯示圖像。但由於某種原因，我的形象最終在盒子下面。請幫忙。框名稱=內容和我在CSS使這個像這樣：圖像脫離盒子

#content{ 
margin: 30px 0; 
background: white; 
padding: 20px; 
clear: both; 
box-shadow: 0px 1px 1px #999; 
}

CSS的圖像：

#img{ 
float:right; 
padding: 20px; 
overflow:hidden; 
}

這裏是html代碼：

<div id="content"> 
    <h2>Kleding</h2> 
    <div id="navbanner"> 
    <div id="nav2"> 
     <ul> 
      <li><a href="../html/kleding.html"id="Babynav">Baby</a></li> 
      <li><a href="../html/kleding.html"id="Peuternav">Peuter</a></li> 
      <li><a href="../html/kleding.html"id="Kleuternav">Kleuter</a></li> 
     </ul> 
    </div> 
    </div> 
    <div id="img"> 
     <img src="../images/winkelwagen.jpg"> 
    </div> 
</div>

在此先感謝。

來源

2013-10-17 Thomas Pen

您可以提供HTML嗎？ – Adnaves

爲你的方塊試試'float：left'，或者在兩者上試試'display：block'。它始終是一個好主意，以顯示您的HTML，最好是一個jsfiddle。 – Randy

提供jsfiddle – Sudharsun

對元素的排列有些混亂。

爲了儘量減少這種情況，使用：

img { // for the image not the div.. 
max-width: 100px; 
}

您可以更改100px取決於只要寬度。這樣，圖像的寬度將會減小以適應該位置。

的錯誤代碼：

的問題是與元素的高度。您創建的列表也有自己的邊距和填充。這是導致圖像移出盒子的原因。

解決方案：

由於這個原因，我申請到height和content拿到盒子內的圖像。因爲現在div有更高的高度來覆蓋它裏面的圖像。但ul仍有其自己的邊距和填充。完全消除該問題。使用

ul { 
margin: 0; 
padding: 0; 
}

這裏是一個小提琴爲此，看看！

http://jsfiddle.net/afzaal_ahmad_zeeshan/AjvuE/

來源

2013-10-17 17:54:35

如果我使用max-width：500px;圖像移動到或離開我的瀏覽器屏幕的邊界。 –

等我創建了一個小提琴 –

現在看看..我已經解釋了這個問題，並添加了一個小提琴:) –

指定height爲content：

#content{ 
margin: 30px 0; 
background: white; 
padding: 20px; 
clear: both; 
box-shadow: 0px 1px 1px #999; 
height:100px; 
}

來源

2013-10-17 17:57:22

改變heigt似乎工作。只有一個高度：由於某些原因，自動停止。 –

這也可以。對不起，我還沒有能夠upvote答案呢。 –

它的工作原理..如果它不，然後添加內容上的「overflow：hidden」。你可以接受答案，如果它解決了你的問題.. :) –

定義height和width爲#content
把h2到#navbanner DIV
浮動#navbanner至左

看到這個jsbin：http://jsbin.com/udOcab/1/

（注：我改變了形象谷歌的標誌，所以你可以實際的例子查看圖像。此外，我添加了一個背景到divs，以便您可以看到它們的位置。）

來源

2013-10-17 18:03:13 Accelerator

這個作品了。對不起，我還沒有能夠upvote答案呢。 –

更新爲更好的解決方案。檢查jsbin – Accelerator

圖像脫離盒子

回答

相關問題