Question

我有一个html文件

<div class="ads_list_admin">
{$dlt_msg}

    {foreach  name = fe1 item = k from = $all_ads}
        <div class="ads_i_admin">

            <div class="ads_own">
                {$k->ad_owner}
            </div>
            <div class="ads_plc">
                {$k->ad_place}
            </div>
            <div class="ads_own">
                <a href="{$path_site}{$index_file}?menu=rm_ads&cmd=rmads">
                    Delete
                </a>    
            </div>
        </div>  
    {/foreach}
</div>

div的css是：

.ads_list_admin
{
    width:560px;
    padding:10px 12px 10px 15px;
    background:#cdc;
}
.ads_i_admin
{
    width:540px;
    clear:both;
    margin:10px;
    color:#666666;
    font-family:Arial;
    font-size:13px;
}
.ads_own
{
    width:120px;
    float:left;
    padding:8px 6px 8px 6px;
}
.ads_plc
{
    padding:8px 6px 8px 6px;
    width:220px;
    float:left;
}

但我的div高度不够。这意味着div的背景颜色没有完全显示。问题是什么？

Answer 1

你需要清除浮动，最简单的方法是给父容器overflow:hidden

更好的方法是使用这种明确的修复技术，为父容器提供cf类：

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Answer 2

问题在于你最内心的div上的float: left。计算元素的高度时会忽略浮动内容。

由于所有内容都是固定宽度，请尝试将float: left替换为display: inline-block。这也可能是“好”的情况 - 甚至是 - 甚至 - 使用表格，因为它看起来像是表格数据。

Div没有显示全高

2 个答案: