0

我看不出我的问题在哪里。我尝试了多种方法，但我仍然遇到同样的问题。正如标题所说，我已经将一个 div 变成了一个 div。当对孩子使用浮动时，他会离开父母的div。即使事实并非如此，但在设置边框以检查它时，这就是我所看到的。

#feed{
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
width: 70%;
float: center;  
}

.news{
margin:auto;
margin-top: 10px;
padding-bottom: 5px;
border: 1px solid;
}

.newsContent{
margin-top: 5px;
margin-left:5px;
margin-right:5px;
background-color:red;
}

.newsContent p{
margin-left: 5px;
margin-right: 5px;
}

.newsDate{
width: 20%;
margin-top: 5px;
margin-left:5px;
margin-right:5px;
float: right;
background-color:red;
}

.newsDate p{
text-align: center; 
}

和我的html代码：

<div id="feed">
    <div class="news">
        <div class="newsContent">
            <p> ici nouveauté </p>
        </div>

        <div class="newsDate">
            <p> ici date </p>
        </div>
    </div>
</div>

谢谢你。

4

3 回答 3

6

添加

<div style="clear: both;"></div>

在子 div 之后，在父 div 内部。这将清除您应用于子 div 的浮动，并应为您提供所需的效果。

于 2012-11-21T15:56:23.553 回答
1

将以下 CSS 规则添加到父元素（.news在这种情况下）应该可以修复它：

overflow: hidden;

在此处查看预览：http: //jsfiddle.net/ChAQq/

于 2012-11-21T16:07:27.607 回答
0

你在寻找这样的东西吗？ http://jsfiddle.net/QPUzd/1/

这是因为浮动属性。你必须小心他们。

#feed{
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
width: 70%;
float: center;  
}

.news{
margin:auto;
margin-top: 10px;
padding-bottom: 5px;
border: 1px solid;
float:left;
}

.newsContent{
margin-top: 5px;
margin-left:5px;
margin-right:5px;
background-color:red;
    float:left;
}

.newsContent p{
margin-left: 5px;
margin-right: 5px;

}

.newsDate{
width: 20%;
margin-top: 5px;
margin-left:5px;
margin-right:5px;
float: right;
background-color:red;
}

.newsDate p{
text-align: center; 
}
于 2012-11-21T16:02:56.900 回答