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 に答える