顯示來自行中數據庫的項目

-1

enter image description here

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

我想4行，而不是5

這行是我的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; 
}

如何顯示4行而不是5行？

三江源

來源

2012-10-26 user1759742

變化幅度，正確的價值或商品的寬度，你最好使用jquery/JS計算寬度的值並以這種方式適用於不同的尺寸 –

計算行數並在CSS中使用'clear'屬性。 – Nahuelistico

我沒有看到任何代碼將行限制爲五個元素。有沒有在這個地方定義的寬度？如果是這樣，請減小寬度，否則只需使用計數器。 – j08691

你的產品目前設定浮動與寬度爲150px。既然你是浮動的，它會繼續添加項目，直到他們不適合（即，如果您的項目是在一個75px寬的容器中10px寬，並添加8，你會看到7在一個'行'與1下一個）。您可以簡單地增加寬度以適合您的產品所在的容器，直到您獲得每個「行」的4個項目。請注意，您的利潤率和任何填充值都會增加此值。

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

如果您不想增加產品單元的寬度，請增加邊距以增加元素的有效寬度。

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

你也應該更新您的項目使用的一類，而不是一個ID，因爲ID應該是在頁面上獨一無二的。

.item { 
    ... 
} 

<div class='item'>...</div>

來源

2012-10-26 16:48:01 Disgone

從看代碼，似乎沒有要任何東西，「勢力」五行，你可以簡單地改變爲四個。父元素的寬度很可能自然導致項目出現在五行中。如果是這樣的話，你有幾個選擇。您可以添加左邊距和/或右邊距，或更改項目的寬度以使其變寬，並強制它們更快地溢出到下一行。或者，您可以在PHP中實現一個計數器，在每四個項目後添加一個<br>標籤（或類似標籤）。你也可以縮小父元素，儘管這可能不是一個選項。 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-26 16:45:23

據我所知，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-26 17:05:53 Mantas

顯示來自行中數據庫的項目

回答

相關問題