3

これが私のコードです：

<?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/のようなフェッチされたレコードの出力が必要です

phpループで印刷するときに、各行の中央のdivにのみ、両側（左と右）に10pxのマージンを適用するにはどうすればよいか教えてください。

4

3 に答える 3

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; 
?>
于 2012-12-19T15:26:08.080 に答える
0

css:first-childと:last-childセレクターを使用する

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

複数の行がある場合は、簡単にするためにhtmlを変更する必要があります：このデモを参照してください

于 2012-12-19T14:55:12.507 に答える
0

これは、CSSソリューションで最もよく達成されます。左マージンを忘れて右マージンを適用するだけの場合は、最後の子から削除できます。CSSの行数が少ないため、パフォーマンスが向上します。

.box{
    float: left;
    width:245px;
    height:200px;
    background-color:#0CC;
    margin: 0 20px 10px 0;
}
.box:last-child {
    margin-right: 0;
}
于 2012-12-19T15:36:30.350 に答える