包装器div高度为0，其中有浮动元素 [英] Wrapper div height is 0 with floated elements inside

问题描述

我有一个包含< div> 的包装

<div class="outside" style="border:1px solid #555;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>

问题是包装器< div> 宽度为80px，因为两个内部< div> 各为40px。但总是包装器< div> 在高度上是 0px ，使边框在顶部看起来像一条线。

The problem is the wrapper <div> has width of 80px since two inner <div> are 40px each. But always the wrapper <div> is 0px in height which makes the border appear like a line at the top.

所以我将两个内部< div> 放在< table> ; 。它工作得很好。但是我如何避免这个问题，而不去一个< table> ？

So I placed the two inner <div>s inside a <table>. It worked well. But how do I avoid this problem without going for a <table>?

推荐答案

在父级上设置 overflow：hidden 。

<div class="outside" style="border:1px solid #555;overflow:hidden;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>

这篇关于包装器div高度为0，其中有浮动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！