如何在循环打印时在DIV上应用保证金?

时间:2012-12-19 14:48:09

标签: php html css

这是我的代码:

<?php 
     $qr = mysql_query("SELECT * FROM products");
     while($res = mysql_fetch_array($qr)):
?>

<div class="box">
    <p><?php echo $res[1]; ?></p>
    <img src="<?php echo $res[3]; ?>" width="100" /><br />
    <a href="<?php echo $res[4]; ?>">View Data Sheet</a>            
</div>

<?php 
    endwhile; 
?>

我希望获取的记录输出如http://jsfiddle.net/CqYhE/3/

请帮助我,如何在两侧(左侧和右侧)应用10px的余量,仅在每行的中心div上应用php循环打印。

2 个答案:

答案 0 :(得分:2)

以下是您的解决方案:

这适用于 N 部门。

<?php 
    $qr = mysql_query("SELECT * FROM products");

    $count = 1;
    $margin='';

    while($res = mysql_fetch_array($qr)):
        $count == 2 ? $margin='style="margin:0px 10px;"' : $margin = '';
        $count == 3 ? $count = 1 : $count++;
?>    

    <div class="box" <?php echo $margin; ?>>
        <p><?php echo $res[1]; ?></p>
        <img src="<?php echo $res[3]; ?>" width="100" /><br />
        <a href="<?php echo $res[4]; ?>">View Data Sheet</a>            
    </div>

<?php 
    endwhile; 
?>

答案 1 :(得分:0)

使用CSS解决方案可以达到最佳效果。如果您忘记左边距并且只应用一个右边距,则可以将其从最后一个孩子中移除。较少的CSS线使性能更好。

.box{
    float: left;
    width:245px;
    height:200px;
    background-color:#0CC;
    margin: 0 20px 10px 0;
}
.box:last-child {
    margin-right: 0;
}