圖像重疊在文本上

-1

第一個div包含圖像，並且圖像與第二個div的內容重疊。

<div> 
    <img src="happy.jpg" style="height:50px;width:50px;border-radius:50%;float:left" /> alex is desperately looking for college and there are many more like here 
    </div> 

    <div id="progressbar"> 
    <label id="ProgressText"> 
     alex is still unhappy, step <label id="RemainingSteps">2</label> to go 
    </label> 
    <div id="progressFilled"> 

    </div> 
</div>

enter image description here

我想要的圖像不應重疊第二個div的內容。我怎樣才能做到這一點？

來源

2014-05-08 Hitesh Modha

使用下面的代碼。

<div class="clearfix"> 
    <img src="happy.jpg" style="height:50px;width:50px;border-radius:50%;float:left" /> alex is desperately looking for college and there are many more like here 
    </div> 

    <div id="progressbar"> 
    <label id="ProgressText"> 
     alex is still unhappy, step <label id="RemainingSteps">2</label> to go 
    </label> 
    <div id="progressFilled"> 

    </div> 
</div>

一下添加到CSS

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

來源

2014-05-08 06:52:34

你能解釋一下你是如何做到這一點？ –

應該始終清除包含浮動元素的div，以便div的高度根據裏面最大浮動元素的高度進行調整。這被稱爲clearfix hack。請參閱此鏈接以獲得更好的底線。 http://learnlayout.com/clearfix.html如果您對答案感到滿意，如果您選擇正確答案，我將不勝感激。謝謝:-) –

@VinceCgto這個解決方案有什麼問題？我已經添加了這個事情發生的原因。 –

您需要的溢出設置爲隱藏。

CSS

.wrap{ 
    overflow: hidden; 
}

HTML

<div class="wrap"> 
    <img src="happy.jpg" style="height:50px;width:50px;border-radius:50%;float:left" /> 
    alex is desperately looking for college and there are many more like here 
</div> 

<div id="progressbar"> 
    <label id="ProgressText"> 
     alex is still unhappy, step <label id="RemainingSteps">2</label> to go 
    </label> 
    <div id="progressFilled"> 
    </div> 
</div>

來源

2014-05-08 07:09:23

圖像重疊在文本上

回答

相關問題