div中的内容溢出到div下面

时间:2013-08-25 06:19:54

标签: css

有人可以告诉我为什么page-view-count&的内容我的实施中num-of-days div溢出到top-header

标记:

<div id="top-stats">
    <div id="page-view-count">count</div>
    <div id="num-of-days">num of days</div>
</div> 

<div id="top-header"This is a test</div>

CSS

#top-stats{
    width: 100%;
}

#page-view-count, #num-of-days{
    color: #666;
    text-shadow:1px 1px #FFFFFF;
    font-size:13px;
    font-weight: bold;
    padding-bottom: 5px;
}

#page-view-count{
    float:left;
}

#num-of-days{
    float:right;
}

#top-header{
    width:100%;
    display:block;
    background-color:#DBDB70;
    border-radius:3px;
}

如果我要移除float属性,它会在top-stats内很好地堆叠。

请参阅fiddle

我可能错过了一些简单的规则,但我可能看得太近,需要另外一双眼睛..

1 个答案:

答案 0 :(得分:0)

#top-header{
    clear: both;
    width: 100%;
    display:block;
    background-color:#DBDB70;
    border-radius:3px;
}

Fiddle