最近在写页面的时候遇到了一个问题,就是想让两个div在同一行显示,但是却一直不成功,经过一番研究之后,发现了其中的原因。 <div class= box1 > 这是第一个d
最近在写页面的时候遇到了一个问题,就是想让两个div在同一行显示,但是却一直不成功,经过一番研究之后,发现了其中的原因。
<div class="box1"> 这是第一个div </div> <div class="box2"> 这是第二个div </div>
我们来看一下css样式:
.box1 { float: left; width: 50%; } .box2 { float: right; width: 50%; }
上面的代码看起来没有什么问题,但是实际上却出现了两个div不在同一行显示的问题。经过一番排查,发现原因在于浮动属性使得两个div的父元素高度为0,从而导致两个div在不同行显示。
那么该怎么解决这个问题呢?我们可以在父元素中添加一个clearfix的伪元素:
.parent::after { content: ""; display: table; clear: both; }
这样就可以解决两个div不在同一行显示的问题了,当然也可以使用flex布局、inline-block等方式实现同样的效果。
总之,排查问题时需要从多个方面进行思考,不要被表面上看起来正确的代码所迷惑。
粉丝
0
关注
0
收藏
0