css – 嵌套浮动div会导致外部div不增长

如果有人可以为css提出一个比stackoverflow更好的地方,请让我知道.

我有一个背景和边框的外部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

解决方法

包含浮动块的非浮点块将不会自动扩展,因为浮动块位于正常流程之外(或至少特别在流程外部).一种纠正方法是将overflow属性指定为hidden或auto.

.tip-Box { overflow: auto; }

详见quirksmode.

css – 嵌套浮动div会导致外部div不增长

解决方法

猜你在找的CSS相关文章