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开发者模式下它是相同的东西,除非怪异模式在这种情况下,它呈现我想要它。但我没有看到任何怪癖!这段代码有什么问题?
答
我觉得问题是缩略图 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;">
因此,我立即看到边距和填充。
+0
这样做。先生非常感谢您。 – josh 2012-08-16 13:56:15
请不要使用回声来编写HTML代码:所有逃脱都是不可读的,容易出错。你可以关闭php标签,做HTML然后重新打开php: 'while(something){?>我的HTML Federico 2012-08-15 19:36:36
不,我还没有使用任何外部CSS。我更多的只是尝试练习PHP和MySQL,但这种填充的东西真的让我很恼火。 – josh 2012-08-15 19:42:14
您是使用样式表还是应用了所有内嵌样式?我问的原因是,很高兴看到所有样式适用于上面显示的元素:缩略图,表单,提交等。 – ews2001 2012-08-15 19:56:57