使外部div包含内部div和表格

我是新手与CSS，我正在处理一个我不明白的问题。我有一个父div“页脚”，其中包含一个子div“投票”。这个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>

来源

2012-11-16 Dan

你还没有清理你的浮标。

<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不包含任何内容，因为#vote和#voteForm都不在页面流中。

来源

2012-11-16 19:50:13 Jrod

谢谢！这确实是问题。 – Dan

使外部div包含内部div和表格

回答

相关问题