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%;
}

并删除所有＆lt; br /＆gt;来自代码的标记

在两列中显示来自mysql的数据

3 个答案: