详细说明波动原素造成的难⊙ω⊙题调解决方法

日期：2021-01-20 类型：科技新闻 

关键词：h5互动游戏，微信h5怎么制作，h5转盘抽奖，h5测试制作，凡科H5

一、难题

  • 好几个波动的原素没法撑开父原素的总宽，父原素的高宽比将会能变成0。
  • 若波动原素后边跟非波动原素，非波动原素会紧跟之后波动起來。
  • 若波动原素前边也有平级原素沒有波动则会危害网页页面构造。

二、处理方法

1.clear:both

在最终一个波动原素后边加上特性为clear:both;的原素。

<style>
div.parent>div.fl{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid red;
}
.clear{
    clear: both;
}
</style>
<div class="parent">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
    <div class="clear">5</div>
</div>

给父原素加上clear:both;特性的:after伪原素。

<style>
div.parent>div.fl{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid red;
}
.clear:after{
    content: '';
    display: block;
    clear: both;
}
</style>
<div class="parent clear">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
</div>

留意：伪原素默认设置是内联水准，因此依靠伪原素时要设定特性display: block;。

2.overflow:auto / overflow: hidden

<style>
div.parent{
    overflow: auto;
    /*overflow: hidden;还可以*/
}
div.parent>div.fl{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid red;
}
</style>
<div class="parent">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
</div>

3.波动父级原素

<style>
div.parent{
    float: left;
}
div.parent>div.fl{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid red;
}
</style>
<div class="parent">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
</div>

留意：一般无需这一方式，会造成父级原素排版设计难题。

到此这篇有关详细说明波动原素造成的难题调解决方法的文章内容就详细介绍到这了,大量有关波动原素造成难题內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

上一篇：应用lay■ui架构完成点一下左边导航栏转换右边內 返回下一篇：没有了