0

次のhtml構造を検討してください。

<div class="entry">
    <h1>Title</h1>
    <p>...</p>
    <p>...</p>
    <div class="tagged">...</div>
    <div class="comments">...</div>
</div>

cssは次のとおりです。

.taggged { float: left; width: 50%; }
.comments { float: right; width: 50%; text-align: right; }
.entry { margin-bottom: 30px; }

問題は、余白（または該当する場合はパディング）が.entry要素の下部に表示されないことです。私が試しoverflow: autoたこと.entryとのさまざまな順列clear:

4

4 に答える 4

2

やってみます

.entry { overflow:hidden; margin-bottom:30px; }

私の経験でうまく機能するもう1つのことは、次のように、ソースの順序で最初に正しいfloat要素を使用することです。

<div class="entry">
    <h1>Title</h1>
    <p>...</p>
    <p>...</p>
    <div class="comments">...</div>
    <div class="tagged">...</div>
</div>
于 2012-07-28T15:41:46.953 に答える
1

コードに他に何が含まれているのかわかりませんが、このフィドルのFF、Chrome、およびIE7 +では、overflow: auto（または）を追加するだけで機能します。あなたが最初に試したと言ったのは知っています。hidden

于 2012-07-28T15:43:45.537 に答える
1

次のように機能するように調整できたようです。

CSS：

 body { overflow: hidden; }
.taggged { float: left; width: 50%; }
.comments { float: right; width: 50%; text-align: right; margin-bottom: 30px; }
.entry { overflow: auto; width: 100%; }

マージンを下のdivに移動し、エントリをに変更しましたwidth: 100%; overflow: auto;。私はそれをテストしました、そしてそれはFirefoxとOperaで動作します。

http://www.quirksmode.org/css/clearing.html

于 2012-07-28T15:45:07.147 に答える
1

コメントの後に要素（divまたはspan）を追加し、それを明確にします。あなたのスタイルで。

于 2012-07-28T15:38:29.487 に答える