您的位置：首页 > 其它

div内部嵌套div时，高度设置问题

2017-12-28 19:44 155 查看

问题

当div内部嵌套多个div，内部div设置浮动时，父级div的高度受影响，无法计算，外层div会变成一条水平线!

代码结构如下：

<div class="outer">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

如图所示：

解决方法1：

在内层div的后面添加一个div，清除浮动

<div class="outer">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<!-- 新增-->
<div style="clear:both"></div>
</div>

解决方法2：

给父元素添加一个属性

overflow:hidden;

<div class="outer" style="overflow:hidden;"> <!--修改-->
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航