Div不能正確呈現

以下是我正在製作的練習網站的一些代碼。它運行良好，唯一的問題是，儘管我明確指出「padding-top：50px;」，但表單和按鈕之間沒有填充。在具有怪癖模式的IE 9中呈現填充，但沒有怪癖模式，或使用Firefox（14），沒有填充。Div不能正確呈現

<form action="action.php" method="post"> 
<div id="thumbails" class="thumbnails"> 
    <?php 
     $query="SELECT page_title, page_thumb FROM `pages` WHERE page_thumb != ''"; 
     if($result = $mysqli->query($query)) 
     { 
      $i = 1; 
      while($row = $result->fetch_assoc()) 
      {?> 
       <div id="container<?php echo $i?>" class="container" style="width:25%; float:left;"> 
       <img src="<?php echo $row[page_thumb]?>" height=220 width=200 /> 
       <input class="cbox" type="checkbox" name="pages[]" value="<?php echo $row[page_title]?>"/> 
       </div> 
      <?php 
       $i++; 
      } 
     } 
    ?> 
</div> 
<div id="submit" class="submit" style="padding-top:50px;text-align:center;"> 
    <input type="submit"/> 
</div> 
</form>

當我使用Firebug檢查它，它顯示的是包含提交的div覆蓋整個形式不只是提交按鈕。在IE開發者模式下它是相同的東西，除非怪異模式在這種情況下，它呈現我想要它。但我沒有看到任何怪癖！這段代碼有什麼問題？

來源

2012-08-15 josh

請不要使用回聲來編寫HTML代碼：所有逃脫都是不可讀的，容易出錯。你可以關閉php標籤，做HTML然後重新打開php： 'while（something）{？>我的HTML<？php}' 回到問題：你是否也在使用.css文件＃提交，。提交，#thumbnails和.thumbnails？ – Federico 2012-08-15 19:36:36

不，我還沒有使用任何外部CSS。我更多的只是嘗試練習PHP和MySQL，但這種填充的東西真的讓我很惱火。 – josh 2012-08-15 19:42:14

您是使用樣式表還是應用了所有內嵌樣式？我問的原因是，很高興看到所有樣式適用於上面顯示的元素：縮略圖，表單，提交等。 – ews2001 2012-08-15 19:56:57

我覺得問題是縮略圖 div沒有指定的高度。包含在縮略圖中的div是浮動的，所以它們的高度不計算父div的最終高度。結果是縮略圖'高度爲0，所以提交div計算是填充頂部從首頁;但圖像的高度是200px，所以輸入被壓下。如果您嘗試：

<div id="thumbails" class="thumbnails" style="height:300px;">

你會看到你想要的。爲了找出這個問題，我通常會在div上加上一些邊框。

<div id="thumbails" class="thumbnails" style="height:300px; border:1px solid red;"> 
<div id="submit" class="submit" style="padding-top:50px;text-align:center;border:1px solid green;">

因此，我立即看到邊距和填充。

來源

2012-08-16 10:44:16 Federico

這樣做。先生非常感謝您。 – josh 2012-08-16 13:56:15

Div不能正確呈現

回答

相關問題