2012-04-02 4 views
0

我已經設置了一個div,但是由於float:left,它內部的圖像超出了它的限制。有什麼可以解決這個問題?HTML:div不受影像大小的影響

這裏是我的代碼:

<html> 
<head></head> 
<body> 
<div style='width:600px;min-height:50px;border:1px solid black;padding:5px;'> 
<img src='pic.jpg' style='border:1px solid #C0C0C0;padding:5px;float:left;height:150px;width:150px;'> 
<div> 
<p>There are a lot of things </p> 
</div> 
</div> 
</body> 
</html> 
+0

清除浮動:http://stackoverflow.com/questions/6328080/methods-of-clearing-floats-effects – 2012-04-02 00:47:18

回答

2

使用overflow:hidden於母公司的股利

0

OK,我並不完全相信你的要求,因此,如果這是一個錯誤的答案我提前道歉,但變化:

<img src='pic.jpg' style='border:1px solid C0C0C0;padding:5px;float:left;height:150px;width:150px;'> 

要:

<img src='pic.jpg' style='border:1px solid #C0C0C0;margin:5px;float:left;height:150px;width:150px;'> 

填充通常會擴大父容器的寬度,因此請嘗試使用邊距。

0

如果您想讓包含框展開以適合圖像,請清除浮動。清除浮動的

幾個例子:http://jsfiddle.net/MJK4u/1/

更先進的技術(推薦)用於清除浮動的元素:methods of clearing float's effects

如果你想隱藏溢出,使用overflow-hidden。如果你想要溢出滾動,overflow-scroll

1
<html> 
    <head></head> 
    <body> 
    <div style='width:600px;min-height:50px;border:1px solid black;padding:5px;'> 
     <img src='pic.jpg' style='border:1px solid #C0C0C0;padding:5px;float:left;height:150px;width:150px;'> 
     <div> 
     <p>There are a lot of things </p> 
     </div> 
     <br style="clear:both;"/>   <!-- the addition --> 
    </div> 
    </body> 
</html> 
0

嗨,你可以用兩個東西做的像你

有此問題的兩個解決方案。

  1. 認爲你可以定義你的父母溢出隱藏,因爲這是坍塌邊緣問題

爲LIK這

CSS

.parent{ 
    width:600px; 
    min-height:50px; 
    border:solid 1px black; 
    overflow:hidden; 
} 
img{ 
    display:inline-block; 
    border:solid 1px #c0c0c0; 
    padding:5px; 
    height:150px; 
    width:150px; 
    margin:10px; 
} 

.child{ 
    display: inline-block; 
    vertical-align: top; 
} 

HMTL

<div class="parent"> 
<img src='pic.jpg' alt="sample img"> 
<div class="child"> 
<p>There are a lot of things </p> 
</div> 
</div>​ 

現場演示click herehttp://jsfiddle.net/rohitazad/awEDY/1/

  1. 是你可以定義YOUT img標籤和兒童的div顯示inline-block的像這樣

css

.parent{ 
    width:600px; 
    min-height:50px; 
    border:solid 1px black; 
    overflow:hidden; 
} 
img{ 
    float:left; 
    border:solid 1px #c0c0c0; 
    padding:5px; 
    height:150px; 
    width:150px; 
    margin:10px; 
} 

.child{ 

} 
​ 

HMTL

<div class="parent"> 
<img src='pic.jpg' alt="sample img"> 
<div class="child"> 
<p>There are a lot of things </p> 
</div> 
</div>​ 

直播demohttp://jsfiddle.net/rohitazad/awEDY/3/