Question

好的，所以我有一个while循环，我想要每行三个项目。我试图使用column-count: 3;它不起作用！我也尝试将包含div限制为702px并使div类框234px 234 * 3 = 702仍然无效！（只是为了让你知道包含div有display: table;的css这是它的样子比如：http://postimg.org/image/t262vsymr/，你可以看到它只是一直在进行。

这是PHP：

while ($row = mysql_fetch_assoc($find_results)) {
$title = $row['title'];
$img = $row['imagename'];
$price = $row['price'];


echo "<div class=\"box\"><img class=\"results\" src=\"uimg/$img\"/><br />$title<br />$$price<br /></div>";

 }

我的CSS：

.results{
height: 200px;
width: 200px;
border-radius: 2px;
padding-top:30px;
padding-left: 15px;
padding-right: 15px;


 }
  .box{
    width: 234px;
    display: table-cell;
 }

感谢任何可以提供帮助的人！

Answer 1

尝试使用此css：

.content-layout
{
   display: table;
   width: 100%;
   table-layout: fixed;
}

.content-layout-row 
{
   display: table-row;
}

.box
{
   display: table-cell;
   vertical-align: top;
}

然后在php：

      echo "<div class=\"content-layout\">
               <div class=\"content-layout-row\">";



     while ($row = mysql_fetch_assoc($find_results)) {
    $title = $row['title'];
    $img = $row['imagename'];
    $price = $row['price'];


    $cells = "<div class=\"box\"><img class=\"results\" src=\"uimg/$img\"/><br />$title<br />$$price<br /></div>";
    $i=0;    
    foreach($cells as $cell){
    $i++;
    echo $cell;
     if($i == 3){
            echo "</div></div><div class=\"content-layout\">
               <div class=\"content-layout-row\">";  
            $i=0;
        }
     }

}
echo "</div></div>";

Answer 2

好的，所以不确定这是不是你想要这样做，但这是我的看法：

echo "<div class=\"box\">";
$row_items = 0;

while ($row = mysql_fetch_assoc($find_results)) {
    $title = $row['title'];
    $img = $row['imagename'];
    $price = $row['price'];
    $row_items++;

    switch ($row_items) {
        case 1:
            echo "<tr>";
            echo "<td><img class=\"results\" src=\"uimg/$img\"/><br />$title<br />$$price<br /><td>";
            break;
        case 2:
            echo "<td><img class=\"results\" src=\"uimg/$img\"/><br />$title<br />$$price<br /><td>";
            break;
        case 3:
            echo "<td><img class=\"results\" src=\"uimg/$img\"/><br />$title<br />$$price<br /><td>";
            echo "</tr>";
            $row_items = 0;
            break;
    }
}
echo "</div>";

将搜索结果与css对齐

2 个答案: