【问题标题】:how to display mysql query results in sequential div's [closed]如何在顺序div中显示mysql查询结果[关闭]
【发布时间】:2021-10-30 00:07:47
【问题描述】:

我想以顺序方式在 div 中显示来自 mysql 数据库的内容的那一刻,我陷入了困境。我得到了成功的查询,但是我以列表的方式在 div 中得到了结果。任何人都可以建议我如何按顺序显示它。代码是

$sql="select * from admn_pckge";
$result=mysql_query($sql);
<?php
     if(mysql_num_rows($result)>0)
     {
         while($row=mysql_fetch_array($result))
         {
             ?>
             <div class="pricing-container">
                 <div class="header">
                    Premium
                 </div>
             <div class="price">
                 <span>
                     <sup class="currency"></sup><span class="figure"><?php echo $row['admn_pckge_price']; ?></span> <sup class="cent">
                  Rs</sup> 
                     <sup class="frequency">Event</sup>
              </span>
              <div class='details'>based on 1 yr</div>
             </div>
             <div class="itemsWrapper">

                 <ul class="items">
                     <div class="item">
                           <?php echo $row['admn_pckge_itm1']; ?>     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm1_qty']; ?>
                     </div><hr/>
                     <div class="item">
                           <?php echo $row['admn_pckge_itm2']; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm2_qty']; ?>
                     </div><hr/>
                     <div class="item">
                        <?php echo $row['admn_pckge_itm3']; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm3_qty']; ?>
                    </div><hr/>
                     <div class="item">
                            <?php echo $row['admn_pckge_itm4']; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm4_qty']; ?>
                     </div><hr/>
                     <div class="item">
                        <?php echo $row['admn_pckge_itm5']; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm5_qty']; ?>
                     </div><hr/>
                     <div class="item">
                        <?php echo $row['admn_pckge_itm6']; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm6_qty']; ?>
                    </div><hr/>
                     <div class="item">
                        <?php echo $row['admn_pckge_itm7']; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm7_qty']; ?>
                     </div><hr/>

                     </ul>
                 </div>
             </div>
             <?php
              }
             }
            ?>

            <style>
           .pricing-container {
               width: 300px;
               text-align: center;
               font-family: 'Open Sans Condensed', sans-serif;
            }
           .pricing-container .header {
               background: #2F2F2F;
               color: white;
               padding: 25px;
               font-size: 2.5em;
               font-weight: 300;
               border-radius: 5px 5px 0 0;
           }
       .pricing-container .price {
        background: #66D2AC;
       background: linear-gradient(10deg, #93da9f 30%, #66d2ac 80%);
       color: white;
       padding: 10px;
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
       text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
       font-size: 1.3em;
       }
      .pricing-container .price .figure {
      font-weight: 800;
     font-size: 1.2em;
     margin: 0 2px;
     }
     .pricing-container .price .cent {
     text-decoration: underline;
      }
    .pricing-container .price .frequency {
     color: #2F757F;
     text-shadow: none;
      }
      .pricing-container .price:hover .details {
     height: 20px;
     }
    .pricing-container .price .details {
     color: #2F757F;
     font-size: .6em;
      display: block;
       height: 0;
      overflow: hidden;
       transition: all 400ms ease;
      }
     .pricing-container .itemsWrapper {
    border: 2px solid #E6E6E6;
       border-top: none;
       border-radius: 0 0 2px 2px;
     background: white;
       box-shadow: inset 14px 0 white, inset 15px 0 #f2f2f2, inset -14px 0  white, inset -15px 0 #f2f2f2;
      }
     .pricing-container .itemsWrapper .items {
      list-style: none;
      padding: 15px;
       margin: 0;
       }
      .pricing-container .itemsWrapper .item {
     padding: 10px;
        text-transform: capitalize;
        font-size:20px;
       font-style:oblique;
         }
        </style>

【问题讨论】:

  • 我真的认为你应该在进入服务器端编码之前学习 html
  • 使用jsfiddle 并提供一些完美的解释。
  • 这里我们不知道您要显示的内容。您的循环几乎不可能需要所有这些 HTML。
  • 您以列表方式获取它是什么意思?你的意思是像 1,2,3 或 a,b,c 还是什么?您确实意识到ul 是一个“列表”,对吗?这是一个无序列表。由于您没有创建任何列表项 &lt;li&gt;... php 正在为您修复代码并在您的 div 周围放置 &lt;li&gt; 标签。

标签: php mysql html css


【解决方案1】:

尝试将您的 CSS 移动到您的其他代码之上...它确实应该在您的 &lt;head&gt;&lt;/head&gt; 标记内。

那么你有两个选择……

  1. 如果您希望所有 div 都在一个列表项中,这是代码示例




  2. 如果您希望每个 div 都成为自己的列表项,这是代码示例...

              <ul class="items">
                <li>
                  <div class="item">
                        <?php echo $row['admn_pckge_itm1']; ?>     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm1_qty']; ?>
                  </div><hr/>
                </li>
                <li>
                  <div class="item">
                        <?php echo $row['admn_pckge_itm2']; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm2_qty']; ?>
                  </div><hr/>
                </li>
                <li>
                  <div class="item">
                     <?php echo $row['admn_pckge_itm3']; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $row['admn_pckge_itm3_qty']; ?>
                 </div><hr/>
                </li>
                  </ul>
              </div>
          </div>
          <?php
           }
          }
         ?>
    

【讨论】:

  • 谢谢我的朋友。真的很管用.....
【解决方案2】:

使用 for 循环而不是使用 while 循环,因为 while 循环将无限期地运行。

【讨论】:

  • 除非数据库包含无限数量的结果,我对此表示怀疑。
  • 没有在数据库中它只包含 2 行结果。
猜你喜欢
  • 2011-08-28
  • 1970-01-01
  • 1970-01-01
  • 2013-01-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-11-25
相关资源
最近更新 更多