HTML、CSS Box 模型问题答案

【问题标题】：HTML, CSS Box model questionHTML、CSS Box 模型问题
【发布时间】：2010-11-02 19:54:30
【问题描述】：

代码 -

while($row=mysql_fetch_array($result))  
                { 

            <div class="feed_element">  
            <span class="feed_title">  
                <?php echo $row['user_id'];?>  
            </span>  
            <span class="feed_content">  
                <?php echo $row['feed_content']; ?>  
            </span>  
            </div>

CSS -

.feed_title  
{  
    background-color: #fed100;  
    min-width:100px;  
    float: left;  
}  
.feed_content  
{   
    float: left;  
    min-width: 270px;  
}  
.feed_element  
{  
    border-bottom-style: solid;  
    border-bottom-width: 10px;  
}

问题 - div class="feed_element" 加载时没有任何内容，但只有边框跨度的负载在它上面和上面。从它的外观来看，跨度正在从 div 中加载出来。我该如何解决这个问题？

【问题讨论】：

请显示完成的、生成的 HTML。
不应该标记php吗？
问题是关于HTML盒子模型的，PHP无关紧要。

标签： html css css-float

【解决方案1】：

只需将溢出属性添加到 .feed_element

.feed_element
{
  overflow: auto;
  .... your css rules;
}

CSS Floats

浮动元素是从正常的 html 元素流中取出的。默认溢出值是可见的，它告诉浏览器允许内容可见，但内容流到容器边界之外。

【讨论】：

【解决方案2】：

这是因为您正在为孩子使用浮动。如果孩子漂浮，父母不会得到高度。您可以通过向最后一个子元素添加 clear 或将 feed_element 也设置为浮动来纠正此问题。

【讨论】：