如果有人可以为 css 问题推荐一个比 stackoverflow 更好的地方,请告诉我。
我有一个带有背景和边框的外部 div,然后我需要在彩色框中有两列。出于某种原因,当我将 float 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;
}
截图:
最佳答案
包含 float block 的非 float block 不会自动扩展,因为 float block 被置于正常流之外(或至少特别地处于流之外)。一种纠正方法是将 overflow
属性指定为 hidden
或 auto
。
.tip-box { overflow: auto; }
参见 quirksmode了解更多。
关于css - 嵌套 float div 导致外部 div 不增长,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4161474/