-1

この画像は私のウェブサイトのホームページを示しています。

ここに画像の説明を入力してください

http://i163.photobucket.com/albums/t315/smc22_2007/Website.png

5行ではなく4行が必要です。

これが私のphpコードです：

<?php

$query = "SELECT * FROM UFPProducts";
$results = mysql_query ($query, $connect);

while ($row = @ mysql_fetch_array($results))
{

print



"<div id= 'item'>" .

"<p>Product id ".$row["ProductID"]."</p>".
"<p><img src=".$row["Image"]."></p>".
"<p>&pound".$row["Price"]."</p>".
"<p>".$row["Description"]."</p>".

"</div>";
}

上記のCSSは次のとおりです。

#item {
    width:100px;
    text-align:center;
    border: 1px solid #D9D9D9;
    padding: 0px;
    list-style: none;
    width: 150px;
    float: left;    
    margin-right: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    -moz-border-radius: 10px; /* firefox rounded corners */
    -webkit-border-radius: 10px; /* Safari rounded corners */
    min-height: 220px;
}



#item li h1 {
text-align:center:
}

#item li#white{
    min-height: 220px;
}

5行ではなく4行を表示するにはどうすればよいですか？

ありがとうございました

4

3 に答える 3

2

コードを見ると、単純に4行に変更できる5行を「強制」するものはないようです。親要素の幅によって、アイテムが5行で表示される可能性は十分にあります。その場合は、いくつかのオプションがあります。左または右の余白を追加したり、アイテムの幅を変更してアイテムを広くし、次の行にすぐにオーバーフローさせることができます。<br>または、 4つのアイテムごとにタグ（または同様のもの）を追加するカウンターをPHPに実装することもできます。親要素を縮小することもできますが、それはオプションではない場合があります。CSSオプションは非常に単純で#item、幅を広げます。

#item {
    width:100px;
    /*... other css ...*/
}

PHPの場合：

<?php
//rest of code
$counter=0;
while ($row = @ mysql_fetch_array($results))
{

print



"<div id= 'item'>" .

"<p>Product id ".$row["ProductID"]."</p>".
"<p><img src=".$row["Image"]."></p>".
"<p>&pound".$row["Price"]."</p>".
"<p>".$row["Description"]."</p>".

"</div>";
$counter++;
if ($counter==3) {
    $counter=0;
    print "<br>";
}
}
于 2012-10-26T16:45:23.677 に答える
0

私が見る限り、whileループは制限を強制しません。さて、私の提案は次のようなものになります。

$i = 1;
$cssClass = 'item';
$columns = 4;
while ($row = @ mysql_fetch_array($results))
{
    $class = $cssClass;
    if (($i % $columns) == 0) {
        $class .= ' clear';
    }
    print "<div id='{$class}'>" .
        "<p>Product id " . $row["ProductID"] . "</p>" .
        "<p><img src=" . $row[" Image"] . "></p>" .
        "<p>&pound" . $row["Price"] . "</p>" .
        "<p>" . $row["Description"] . "</p>" .
        "</div>";
    $i++;
}

そして、cssで次のように定義します。

.clear { clear:both; }
于 2012-10-26T17:05:53.503 に答える
0

現在、商品は150pxの幅でフロートするように設定されています。フローティングなので、収まらないまでアイテムを追加し続けます（つまり、アイテムが75px幅のコンテナに10px幅で、8を追加すると、1つの「行」に7が表示され、1が1に表示されます。次）。「行」ごとに4つのアイテムができるまで、商品が入っているコンテナに合わせて幅を広げるだけです。余白とパディングもこれに追加されるので、それを覚えておいてください。

#item {
    ...
    width: 200px;
    ...
}

商品セルの幅を広げたくない場合は、マージンを増やして要素の有効幅を増やします。

#item {
    ...
    margin-right: 20px;
    ...
}

また、IDはページ上で一意であると想定されているため、IDの代わりにクラスを使用するようにアイテムを更新する必要があります。

.item {
    ...
}

<div class='item'>...</div>
于 2012-10-26T16:48:01.167 に答える