1

私はcssの初心者で、理解できない問題に取り組んでいます。子div「投票」を含む親div「フッター」があります。この div には、現在画像ボタンで構成されているフォームが含まれています。

これを「Inspect Element」で表示すると、フッター div の高さは 0px で、定義されたマージンだけが表示されます。どうしてこれなの？親 div は、定義されていない場合にサイズを調整する内部 div を保持するべきではありませんか?

これは、テキスト要素を追加する場合に起こります (コード例でコメントアウトされた行) が、この特定のケースでは、テキストを追加する必要がないため、これはオプションではありません。

ヒントはありますか？

<html>
<head>
<style type="text/css">
#footer {
    margin: 0.2em;
}
#vote {
    float: right;
}
#voteForm {
    float: right;
    margin: 0.2em;
}
</style>
</head>
<body>

<div id="footer">
    <div id="vote">
        <form id="voteForm" name="voteForm" action="/vote.php" method="post">
        <input type="image" src="image/vote.png">
        </form>
    </div>
<!--    <h3>Hello</h3> -->
</div>

</body>
</html>
4

1 に答える 1

1

フロートをクリアしていません。

<html>
<head>
<style type="text/css">
#footer {
    margin: 0.2em;
}
#vote {
    float: right;
}
#voteForm {
    float: right;
    margin: 0.2em;
}

.clear {
   clear:both;
}
</style>
</head>
<body>

<div id="footer">
    <div id="vote">
        <form id="voteForm" name="voteForm" action="/vote.php" method="post">
        <input type="image" src="image/vote.png">
        </form>
    </div>
    <div class="clear"><!-- --></div>
<!--    <h3>Hello</h3> -->
</div>

要素をフロートすると、クリアされるまでページの通常のフローから除外されます。したがって、とはどちらもページの流れの外側にある#footerため、 clear がないと には何も含まれません。#vote#voteForm

于 2012-11-16T19:50:13.000 に答える