嵌套浮动 div 导致外部 div 不增长
如果有人可以建议一个比 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;
}
屏幕截图:
If anyone can suggest a better place than stackoverflow for css questions please let me know.
I have an outer div with background and border and then I need to have two columns within the colored box. Some reason when I place the floating divs inside the outer div, the outer div does not grow.
Here is my 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>
Here is my 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;
}
Screenshot:
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
在这种情况下,我不会将 div 向左浮动,我会让它们显示:内联或内联块。
如果浏览器窗口缩小,您的 3 列将变成 2 列,然后变成 1 列。
In this case I wouldn't float the divs left, I would make them display: inline or inline-block.
Your 3 columns will turn into 2 columns, then 1 column if the browser window shrinks.
包含浮动块的非浮动块不会自动扩展,因为浮动块是在正常流之外(或者至少是在流之外)。纠正此问题的一种方法是将
overflow
属性指定为hidden
或auto
。有关更多信息,请参阅 quirksmode。
Non-float blocks containing float blocks will not automatically expand, since float blocks are taken outside the normal flow (or at least specially outside the flow). One way to correct that is to specify the
overflow
property tohidden
orauto
.See quirksmode for more.
在
之后添加以下 HTML:
这是 CSS:
它肯定会起作用。
Add following HTML after
<div class="tip_box"></div>
:Here is the CSS:
It will surely work.
这会在 ie7+ 和其他浏览器中建立新的块格式化上下文,触发 ie6 中的 haslayout 以包含浮动
this establishes new block formatting context in ie7+ and other browsers, triggers haslayout in ie6 to contain floats
您将需要通常所说的清除修复。在这种情况下,包含元素上的
overflow: hide
即可 - 请参阅: http://www.jsfiddle.net/yijian/zuNwH/2顺便说一句,您可能还想使用
label
元素而不是h6
进行标记表单元素的标签,并使用列表而不是单独的div
来包含每个label - input
对,并减少class
的数量您通过依赖 CSS 文件的更复杂的选择器来使用属性。You're going to need what is commonly known as a clearfix. In this case a
overflow: hidden
on the containing element will do - see: http://www.jsfiddle.net/yijiang/zuNwH/2As an aside, you might also want to use
label
elements instead ofh6
to markup labels for your form elements, and use a list instead of individualdiv
s for containing eachlabel - input
pair, and reduce the amount ofclass
attribute you use by relying on more complex selectors for your CSS file.