图像在文本上重叠

Question

代码：

第一个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>

我希望该图像不应与第二个div的内容重叠。我怎么能这样做？

Answer 1

您需要将overflow设置为hidden。

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

Answer 2

使用以下代码。

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