代码之家 › 专栏 › 技术社区 › Jeremy H

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

css-float css

Jeremy H · 技术社区 · 14 年前

如果有人能建议一个比stackoverflow更好的地方来回答css问题,请告诉我。

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

5 回复 | 直到 14 年前

theazureshadow 14 年前

包含浮动块的非浮动块不会自动展开,因为浮动块是在正常流之外(或至少是在流之外)获取的。一种纠正方法是指定 overflow 属性到 hidden 或 auto .

.tip-box { overflow: auto; }

见 quirksmode 更多。

Jason Plank Maksim Kondratyuk 14 年前

在后面添加以下HTML <div class="tip_box"></div> :

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

这里是CSS:

.clear{
clear:both;
}

它一定会起作用的。

meder omuraliev 14 年前

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

这将在ie7+和其他浏览器中建立新的块格式上下文,并在ie6中触发haslayout以包含浮动

Yi Jiang G-Man 14 年前

你将需要一个众所周知的clearfix。在这种情况下 overflow: hidden 在包含元素上将执行-请参见: http://www.jsfiddle.net/yijiang/zuNwH/2

.tip_box {
    overflow: hidden;
}

作为旁白,您可能还想使用 label 元素而不是 h6 为表单元素标记标签,并使用列表而不是单个 div s代表包含每个 label - input 配对,并减少 class 通过对CSS文件依赖更复杂的选择器而使用的属性。

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

tster 14 年前

在这种情况下,我不会让div向左浮动,而是让它们显示:inline或inline块。

如果浏览器窗口缩小,则3列将变为2列,然后1列。