CSS浮动不拉伸Div高度 [英] CSS Float does not stretch Div Height
问题描述
在处理HTML / CSS和浮动广告时，我遇到了这个问题很长时间。
在图片中可以看到我有一个浮动的左边是有很多这些盒子。在框中我有一个< UL> 列表。列表项< li> 也向左浮动。
如图所示，项目不会使它们处于Expand中的Box Div。我试过几件事没有多少运气，希望有更多的经验的人可以帮助？我不能在Box Div上设置固定的高度，因为图标的数量总是不同的，需要展开以修复它们。
现场演示： http://jsfiddle.net/jasondavis/u5HXu/
< div class =module-box>
< div class =module-box-title>
< h4>< i class =icon-cogs>< / i>管理设置< / h4&
< div class =tools>
< a href =＃class =collapse> - < / a>
< / div>
< / div>
< div class =module-box-bodystyle =display：block;>
< ul>
< li>
< a href =＃>
< img src =http://cp.codedevelopr.com/modules/password_assistant/assets/icon.pngborder =0>
< span class =module-icon password_assistant>< / span>
< / a>< br>
< a href =＃>更改< br>密码< / a>
< / li>
< li>
< a href =＃>
< img src =http://cp.codedevelopr.com/modules/password_assistant/assets/icon.pngborder =0>
< span class =module-icon password_assistant>< / span>
< / a>< br>
< a href =＃>更改< br>密码< / a>
< / li>
< li>
< a href =＃>
< img src =http://cp.codedevelopr.com/modules/password_assistant/assets/icon.pngborder =0>
< span class =module-icon password_assistant>< / span>
< / a>< br>
< a href =＃>更改< br>密码< / a>
< / li>
< / ul>
< / div>
< / div>
CSS
/ * Modules homepage * /
.module-box {
margin：0px 0px 25px 25px;
padding：0px;
float：left;
width：464px;
}
.module-box-title {
margin-bottom：0px;
padding：8px 10px 2px 10px;
border-bottom：1px solid #eee;
color：#fff！important;
background-color：＃333;
height：51px;
line-height：45px;
border-radius：3px 3px 0 0;
}
.module-box-title h4 {
display：inline-block;
font-size：18px;
font-weight：400;
margin：0;
padding：0;
margin-bottom：7px;
}
.module-box-title .tools {
display：inline-block;
padding：0;
margin：0;
margin-top：6px;
float：right;
}
.module-box-title .tools a {
font-size：31px;
color：#fff;
text-decoration：none;
line-height：29px;
}
.module-box-body {
background-color：#fff;
border：1px solid #ccc;
border-top：0;
padding：10px;
clear：both;
}
.module-box-body a {
font-family：'Source Sans Pro'，sans-serif;
font-size：11px;
color：＃888;
text-decoration：none;
}
.module-box-body li {
float：left;
margin：0 12px 0 0;
list-style：none;
}
> .clearfix：before，
.clearfix：after {
content：;
display：table;
}
.clearfix：after {
clear：both;
}
.clearfix {
* zoom：1;
}
然后在包含元素上添加类
< div class =module-box-body clearfixstyle =display：block;&
方法2清除元素
.clear {
clear：both;
}
然后在浮动元素后添加以下HTML。
< div class =clear>< / div>
I have had this problem for a long time when working with HTML/CSS and Floats.
In the image you can see I have a Box Div that is Floated left as there is many of these Boxes. Inside the Box I have a <UL> List. The List items <li> are also Floated left.
As you can see in the image, the List items do not make the Box Div that they are inside of Expand. I have tried several thing without much luck and was hoping someone with more experience could help? I cannot set a fixed height on the Box Div as the number of icons is always different and it needs to expand to fix them.
Live demo: http://jsfiddle.net/jasondavis/u5HXu/
<div class="module-box">
<div class="module-box-title">
<h4><i class="icon-cogs"></i>Admin Settings</h4>
<div class="tools">
<a href="#" class="collapse">-</a>
</div>
</div>
<div class="module-box-body" style="display: block;">
<ul>
<li>
<a href="#">
<img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0">
<span class="module-icon password_assistant"></span>
</a><br>
<a href="#">Change<br>Password</a>
</li>
<li>
<a href="#">
<img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0">
<span class="module-icon password_assistant"></span>
</a><br>
<a href="#">Change<br>Password</a>
</li>
<li>
<a href="#">
<img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0">
<span class="module-icon password_assistant"></span>
</a><br>
<a href="#">Change<br>Password</a>
</li>
</ul>
</div>
</div>
CSS
/* Modules homepage */
.module-box {
margin: 0px 0px 25px 25px;
padding: 0px;
float: left;
width: 464px;
}
.module-box-title {
margin-bottom: 0px;
padding: 8px 10px 2px 10px;
border-bottom: 1px solid #eee;
color: #fff !important;
background-color: #333;
height: 51px;
line-height: 45px;
border-radius: 3px 3px 0 0;
}
.module-box-title h4 {
display: inline-block;
font-size: 18px;
font-weight: 400;
margin: 0;
padding: 0;
margin-bottom: 7px;
}
.module-box-title .tools {
display: inline-block;
padding: 0;
margin: 0;
margin-top: 6px;
float: right;
}
.module-box-title .tools a {
font-size: 31px;
color: #fff;
text-decoration: none;
line-height: 29px;
}
.module-box-body {
background-color: #fff;
border: 1px solid #ccc;
border-top: 0;
padding: 10px;
clear: both;
}
.module-box-body a {
font-family: 'Source Sans Pro', sans-serif;
font-size: 11px;
color: #888;
text-decoration: none;
}
.module-box-body li {
float: left;
margin: 0 12px 0 0;
list-style: none;
}
You need to clear your floats using a clearfix or clearing element.
Method #1 clearfix
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
Then you add the class on the containing element
<div class="module-box-body clearfix" style="display: block;">
Method #2 Clearing Element
.clear {
clear: both;
}
Then you add the following HTML after your floated elements.
<div class="clear"></div>
这篇关于CSS浮动不拉伸Div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
