div 没有正确渲染答案

【问题标题】：Divs are not rendering correctlydiv 没有正确渲染
【发布时间】：2012-08-15 19:28:23
【问题描述】：

这是我正在制作的练习网站的一些代码。它运行良好，唯一的问题是尽管我明确指出“padding-top：50px;”，但表单和按钮之间没有填充。在带有 quirks 模式的 IE 9 中，它呈现填充，但没有 quirks 模式，或者使用 Firefox (14)，没有填充。

<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 开发人员模式下，它是同样的事情，除非 quirks 模式处于打开状态，在这种情况下，它会呈现我想要的样子。但我没有看到任何怪癖！这段代码有什么问题？

【问题讨论】：

请不要使用 echo 来编写 HTML 代码：所有的转义都是不可读的，而且更容易出错。您可以关闭 php 标签，执行 HTML，然后重新打开 php：while(something){?> <em>my HTML</em> <?php} 回到问题：您是否也在使用带有 #submit、.submit、#thumbnails 和 .thumbnails 的 .css 文件？
不，我还没有使用任何外部 CSS。我更多的只是尝试练习PHP和MySQL，但是这个填充的东西真的让我很恼火。
您使用的是样式表还是所有样式都内联？我问的原因是很高兴看到所有样式都应用于上面显示的元素：缩略图、表单、提交等。

标签： internet-explorer firefox html rendering

【解决方案1】：

我认为问题在于 thumbnails div 没有指定的高度。包含在缩略图中的 div 是浮动的，因此不会针对父 div 的最终高度计算它们的高度。结果是thumbnails'高度为0，所以submit div计算是从首页padding-top；但是图像的高度是 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;">

所以我立即看到了边距和内边距。

【讨论】：

做到了。非常感谢先生。