0

这是我正在制作的练习网站的一些代码。它运行良好，唯一的问题是尽管我明确指出“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 模式处于打开状态，在这种情况下，它会呈现我想要的样子。但我没有看到任何怪癖！这段代码有什么问题？

4

1 回答 1

1

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

所以我立即看到边距和填充。

于 2012-08-16T10:44:16.407 回答