Question

如果有人可以为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

Answer 1

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

.tip-box { overflow: auto; }

有关详情，请参阅quirksmode。

Answer 2

在<div class="tip_box"></div>之后添加以下HTML：

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

这是CSS：

.clear{
clear:both;
}

一定会有用。

Answer 3

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

这在ie7 +和其他浏览器中建立新的块格式化上下文，在ie6中触发haslayout以包含浮点数

Answer 4

您将需要通常所说的clearfix。在这种情况下，包含元素上的overflow: hidden可以执行 - 请参阅：http://www.jsfiddle.net/yijiang/zuNwH/2

.tip_box {
    overflow: hidden;
}

另外，您可能还希望使用label元素而不是h6标记表单元素的标签，并使用列表而不是单个div来包含每个元素label - input对，并依靠CSS文件的更复杂的选择器来减少您使用的class属性的数量。

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

Answer 5

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

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

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

5 个答案: