父div中的子div，float：left [英] Child div in parent div, float:left

问题描述

请查看我的代码： http://jsfiddle.net/XptrZ/
为什么红色里面的蓝色div不是红色的，为什么红色的height = 0。
我如何解决这个问题？
感谢

解决方案

添加 overflow：hidden / p>

  .parent {background-color：gold; border：1px solid gold;位置：相对; overflow：hidden} .child {float：left; width：100px; height：100px;显示：block; margin：10px;背景颜色：粉色; border：1px solid＃999;}  

 < div class =parent> < div class =child> div1< / div> < div class =child> div2< / div> < div class =child> div3< / div> < / div>  

Please take a look at my code: http://jsfiddle.net/XptrZ/ Why are'nt the blue divs inside the red one, and why the red one has height=0. How can I solve this? Thanks

解决方案

add overflow: hidden to parent

.parent {
  background-color: gold;
  border: 1px solid gold;
  position: relative;
  overflow: hidden
}

.child {
  float: left;
  width: 100px;
  height: 100px;
  display: block;
  margin: 10px;
  background-color: pink;
  border: 1px solid #999;
}

<div class="parent">
  <div class="child">div1</div>
  <div class="child">div2</div>
  <div class="child">div3</div>    
</div>

这篇关于父div中的子div，float：left的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！