使外部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和表格

回答

相關問題