本文介绍了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高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-15 16:14