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

【问题标题】：Display data from mysql in two columns在两列中显示来自 mysql 的数据
【发布时间】：2014-05-05 16:08:17
【问题描述】：

我从一个表中的 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>';

谢谢。

【问题讨论】：

如果您向我们展示您期望的输出将会有所帮助。试试this

标签： php html mysql css

【解决方案1】：

我认为您的问题是 CSS 而不是 mysql，如果每次拉下该 while 循环时您正在创建一个新对象，您需要将每个对象浮动到左侧，然后它们应该适合。

所以试试

.product {float:left};

【讨论】：

.product .product-content{ float:left; }
你能粘贴你的 CSS 吗（我遇到过很多这样的问题，比如 div 无法正常浮动：P）？
继续访问 www.urimsopa.com 并检查元素

【解决方案2】：

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

并从您的代码中删除所有
标记

【讨论】：

谢谢。迟回复。我如何让他们之间的差距扩大？ urimsopa.com/index.php?p=Default_index

【解决方案3】：

你必须重构很多方面。

您的产品包装纸的宽度为 640 像素。并且您的单个产品框宽度为 434px。因此，请考虑随着图像宽度减小该框宽度或将包装器宽度增加 870 像素以上，以提供足够的空间来并排放置 2 个框。

您的 .products 类具有 float:left;，这是不必要的。将您的产品类浮动到左侧。

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

记得清除:both;在您的 .products 块之后。

【讨论】：