在兩列中顯示來自mysql的數據

Question

我從一個表的mysql調用，這顯示在一列中，我希望數據在兩列中彼此相鄰。 您可以在www.urimsopa.com上查看

這是我的代碼。

$results = $mysqli->query("SELECT * FROM main_menu ORDER BY MenuID ASC");
    if ($results) { 

        //fetch results set as object and output HTML
        while($obj = $results->fetch_object())
        {
            echo '<div class="product">'; 
            echo '<form method="post" action="model/cart_update.php">';
            echo '<div class="product-content"><h2>'.$obj->Title.'</h2>';
            echo '<div class="product-thumb"><img width=400 height=300 src="uploads/'.$obj->Photo.'"></div>';
             echo '<div class="product-info">';
            echo 'Price '.$currency.$obj->Price.' | ';
            echo 'Qty <input type="text" name="product_qty" value="1" size="5" />';
            echo '<button class="add_to_cart">Add To Cart</button>';
            echo '</div>
           </div>';
         echo '<input type="hidden" name="product_code" value="'.$obj->MenuID.'" />';
            echo '<input type="hidden" name="type" value="add" />';
            echo '<input type="hidden" name="return_url" value="'.$current_url.'" />';
            echo '</form>';
            echo '</div>';

謝謝。

Answer 1

我認為您的問題是CSS而不是mysql，如果每次在創建新對象時都按下while循環，則需要將每個對象向左浮動，然后將它們放到適當的位置。

所以嘗試

.product {float:left};

Answer 2

您必須重構許多方面。

您的產品包裝紙的寬度為640px。 而您的單個產品框的寬度為434px。 因此，請考慮將框的寬度與圖像寬度一起減小，或者將包裝器的寬度增加到870px以上，以提供足夠的空間來並排放置2個框。

您的.products類具有float:left; 這是不必要的。將您的產品類別向左浮動。

.product {
    float: left;
    display: inline-block;
}

記住要清除： 在.products塊之后。

Answer 3

它的CSS問題改變了您的styles.css

781行

#products-wrapper {
float: left;
font: 12px Arial,Helvetica,sans-serif;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
position: relative;
width: 100%;
}

791行

.products {
float: left;
margin-right: 10px;
width: 100%;
}

並從代碼中刪除所有<br/>標簽