css避免文字环绕

最新推荐文章于 2024-05-28 15:06:39 发布

原创最新推荐文章于 2024-05-28 15:06:39 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

183 篇文章

订阅专栏

爬坑

50 篇文章

订阅专栏

问题

在这里插入图片描述

我们要的效果

在这里插入图片描述

    <div class="step4-firstItem">
      <div class="step4-firstCheck">
        <input type="checkbox" />
      </div>
      <div class="step4-firstMain">
        制订的项目管理方案、各项服务项目补助经费参考标准、资金拨付方案、资金支出范围、资金管理制度不符合国家卫生计生委、财政部有关要求，共<input type="number">
      </div>
    </div>

.step4-firstItem{

}
.step4-firstCheck{
  float: left;
  width: 50px;
}
.step4-firstMain{
  float: left;
}

解决

BFC

    <div class="step4-firstItem clearfloat ">
      <div class="step4-firstCheck">
        <input type="checkbox" />
      </div>
      <div class="step4-firstMain">
        制订的项目管理方案、各项服务项目补助经费参考标准、资金拨付方案、资金支出范围、资金管理制度不符合国家卫生计生委、财政部有关要求，共<input type="number">
      </div>
    </div>

clearfloat给父类添加清除浮动

.step4-firstItem{

}
.step4-firstCheck{
  float: left;
  width: 50px;
}
.step4-firstMain{
	float: left;
    width: calc(100% - 22px);
}

/*清除浮动代码*/
.clearfloat:after {
  display: block;
  clear: both;
  content: '';
  visibility: hidden;
  height: 0;
}
.clearfloat {
  zoom: 1;
}