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不能正确呈现

回答

相关问题