嵌套浮动divs导致外部div不增长

如果任何人都可以建议一个比stackoverflow更好的地方的CSS问题请让我知道。嵌套浮动divs导致外部div不增长

我有一个外部div与背景和边框，然后我需要在彩色框内有两列。某些原因，当我将浮动div放在外部div内时，外部div不会增长。

这里是我的HTML：

<div class="tip_box"> 
    <h3>Send</h3> 
    <hr /> 
    <form id="email_form"> 

     <div class="three-columns"> 
      <div class="contact_form_input"> 
       <h6>Your Name</h6> 
       <input type="text" name="name_text_box" class="form_input" id="name_text_box" /> 
      </div> 
      <div class="contact_form_input"> 
       <h6>Your Email</h6> 
       <input type="text" name="email_text_box" class="form_input" id="email_text_box" /> 
      </div> 
     </div> 
     <div class="three-columns"> 
      <div class="contact_form_input"> 
       <h6>Recipient Name</h6> 
       <input type="text" name="name_text_box" class="form_input" id="Text1" /> 
      </div> 
      <div class="contact_form_input"> 
       <h6>Recipient Email</h6> 
       <input type="text" name="email_text_box" class="form_input" id="Text2" /> 
      </div> 
     </div> 

    </form> 
</div> 

<p>This is where your message will go. Anything you want, as long as you want. Make it personal; make the recipient know you care.</p>

这里是我的CSS：

.three-columns { 
    width: 290px; 
    float: left; 
    margin-right: 45px; 
} 
.tip_box { 
    padding: 20px; 
    margin: 20px 0px; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    -khtml-border-radius: 10px; 
    border-radius: 7px; 
    padding-left: 55px; 
    background: #eee; 
    font-style:italic; 
    background: #eff7d9 url(../images/icons/tip.png) no-repeat scroll 10px 15px; 
    border: 1px solid #b7db58; 
    color: #5d791b; 
}

截图：

http://dl.dropbox.com/u/2127038/cssissue.png

来源

2010-11-12 Jeremy H

我爱你如何把图像清楚地表明你遇到的问题。真的让它快速简单地看到你所描述的问题与我正在寻求解决的问题完全一样。 +1 – 2011-09-25 19:12:39

包含浮动块的非浮动块不会自动展开，因为浮动块在正常流动之外（或者至少特别在流动之外）被采用。一种解决方法是将overflow属性指定为hidden或auto。

.tip-box { overflow: auto; }

有关更多信息，请参见quirksmode。

来源

2010-11-12 04:01:04 theazureshadow

溢出auto会导致滚动条。隐藏是首选。 – 2010-11-12 04:37:28

当然不总是，但提到一件好事。只有当你用某种东西碰到盒子的边缘时才会发生（你可以解决这个问题）。你还应该提到'overflow：hidden'有可能切掉像盒子溢出的图像那样的内容。 – theazureshadow 2010-11-12 04:38:54

（你可能猜到了，我更喜欢'auto'。;） – theazureshadow 2010-11-12 04:42:05

在这种情况下我也不会浮动的div左，我会让它们显示：inline或inline-block。

如果浏览器窗口缩小，您的3列将变为2列，然后是1列。

来源

2010-11-12 03:59:36 tster

-1海报显然希望块彼此相邻排列。浮动是接受的方式来做到这一点。'inline-block'会很有用，但IE6或IE7不支持它，除非你做了一些痛苦的迂回的黑客攻击，在这种情况下发生的事情完全是不必要的。 “内联”在任何似乎预期的地方都不会产生效果;可能根本没有divs。 – theazureshadow 2010-11-12 04:04:31

你将需要什么是俗称的clearfix。在这种情况下，包含的元素上overflow: hidden会做 - 看：http://www.jsfiddle.net/yijiang/zuNwH/2

.tip_box { 
    overflow: hidden; 
}

顺便说一句，你可能也想用label元素，而不是h6来标记标签为您的表单元素，并用一个列表，而不是个人div s包含每个label - input对，并通过依赖更复杂的CSS文件选择器来减少您使用的class属性的数量。

<li> 
    <label for="recipient_email">Recipient Email</label> 
    <input type="text" name="email_text_box" id="recipient_email" /> 
</li>

来源

2010-11-12 04:01:07

.tip_box { overflow:hidden; zoom:1; }

这个建立在IE7 +及其他浏览器新的块格式化内容中，在IE6触发hasLayout的含有浮动

添加下面的HTML后 <div class="tip_box"></div>

来源

2010-11-12 04:03:06

+1对于haslayout的解释，尽管海报仍然应该看[quirksmode]（http://www.quirksmode.org/css/clearing.html）为完整的解释:) – theazureshadow 2010-11-12 04:13:13

：

<div class="clear"></div>

这里是CSS ：

.clear{ 
clear:both; 
}

它肯定会奏效。

来源

2010-11-12 07:01:18 Hem

嵌套浮动divs导致外部div不增长

回答

相关问题