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>

When you float an element you take it out of the normal flow of the page until it is cleared. So without the clear the #footer contains nothing because #vote and #voteForm are both outside of the flow of the page.

于 2012-11-16T19:50:13.000 回答