CSS浮动不拉伸Div高度

本文介绍了CSS浮动不拉伸Div高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在处理HTML / CSS和浮动广告时遇到了这个问题。

在图片中，您可以看到我有一个浮动的左边是有很多这些盒子。在框中我有一个< UL> 列表。列表项< li> 也向左浮动。

如图所示，项目不会使它们处于Expand中的Box Div。我试过几件事没有多少运气，希望有更多的经验的人可以帮助？我不能在Box Div上设置固定的高度，因为图标的数量总是不同的，需要展开以修复它们。

现场演示：

 < 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.codeddevelopr.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;">

http://jsfiddle.net/u5HXu/8/

Method #2 Clearing Element

.clear {
    clear: both;
}

Then you add the following HTML after your floated elements.

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

http://jsfiddle.net/u5HXu/9/

这篇关于CSS浮动不拉伸Div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！