如何在顺序div中显示mysql查询结果

时间:2015-10-01 11:00:41

标签: php mysql html5 css3

我想要以顺序的方式在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>

2 个答案:

答案 0 :(得分:0)

尝试将CSS移到其他代码之上......它确实应该放在<head></head>代码中。

然后你有两个选择......

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

<div class="itemsWrapper">
             <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/>
                 <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/>
                 </li>
               </ul>
             </div>
         </div>
         <?php
          }
         }
        ?>

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
          }
         }
        ?>

快乐的编码!

答案 1 :(得分:-1)

使用for循环而不是使用while循环,因为while循环只是运行indefinatley。