HTML：div不受影像大小的影響

我已經設置了一個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>

來源

2012-04-02 Ali

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

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

來源

2012-04-02 00:47:45 Dips

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;'>

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

來源

2012-04-02 00:49:02

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

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

更先進的技術（推薦）用於清除浮動的元素：methods of clearing float's effects

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

來源

2012-04-02 00:49:43

<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>

來源

2012-04-02 01:12:49

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

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

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

爲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 here http://jsfiddle.net/rohitazad/awEDY/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>

直播demo http://jsfiddle.net/rohitazad/awEDY/3/

來源

2012-04-02 04:48:18

HTML：div不受影像大小的影響

回答

相關問題