HTML - CSS未应用于id

时间：2017-04-04 17:22:24

标签： php html css

我是新手，并尝试使用Xampp建立一个电子商务网站。我无法以有序的方式获取内容区域中的项目（请参阅图像）。 我想要的内容 is something like this 但我正在 content area like this。 index.php中内容区域的代码是：

         <!--content area in pink color-->
               <div id="content_area">
                  <div id="products_box">   
                   <?php getPro(); ?>
                  </div>
              </div>
functions.php中的

getPro（）函数是：

$con = mysqli_connect("localhost","root","","ecommerce");
//get the products
function getPro () {

     global $con;

     $get_pro = "select * from products order by RAND() LIMIT 0,6";
     $run_pro = mysqli_query($con, $get_pro);
     while($row_pro=mysqli_fetch_array($run_pro)){

         $pro_id = $row_pro['product_id'];
         $pro_cat = $row_pro['product_cat'];
         $pro_brand = $row_pro['product_brand'];
         $pro_title = $row_pro['product_title'];
         $pro_price = $row_pro['product_price'];
         $pro_image = $row_pro['product_image'];

         echo "
             <div id='single_product'>

             <h3>$pro_title</h3>
             <img src='admin_area/product_images/$pro_image' width='180' height='180' />
             <p><b>₹ $pro_price</b></p>

             </div>
         ";
     }
}

style.css中的CSS代码是：

#products_box { 
    width:780px;
    text-align:center;
    margin-left:30px;
    margin-bottom:10px;
}

#single_product{
    float:left; 
    margin-left:20px; 
    padding:10px;
}

生成的HTML是：

<!DOCTYPE>
<html>
   <head>

        <title>My online shop</title>
        <link rel="stylesheet" href="styles/style.css" media="all" />   

   </head>

<body>
   <!--Main Container starts here-->
   <div class="main_wrapper">
         <!--header starts here-->
         <div class="header_wrapper">

              <img id="logo" src="images/logo.gif" />
              <img id="banner" src="images/ad_banner.gif" />

         </div>
         <!--header ends here-->

         <!--Navigation bar starts here-->
         <div class="menubar">
                <ul id="menu">

                     <li><a href="#">Home</a></li>
                     <li><a href="#">All Products</a></li>
                     <li><a href="#">My Account</a></li>
                     <li><a href="#">Sign Up</a></li>
                     <li><a href="#">Shopping Cart</a></li>
                     <li><a href="#">Contact Us</a></li>

                </ul>
                <div id="form">
                  <form method="get" action="results.php" enctype="multipart/form-data">

                       <input type="text" name="user_query" placeholder="search a product" />
                       <input type="submit" name="search" value="search" />

                   </form>
                </div>
         </div>
         <!--Navigation bar ends here-->


         <!--Content wrapper starts here-->
         <div class="content_wrapper">

             <div id="sidebar">

                    <!--categories-->
                   <div id="sidebar_title">Categories</div>

                   <ul id="cats"> 

                    <li><a href='#'>Laptops</a></li><li><a href='#'>Cameras</a></li><li><a href='#'>Mobiles</a></li><li><a href='#'>Tablets</a></li><li><a href='#'>media players</a></li><li><a href='#'>Ebook readers</a></li><li><a href='#'>Graphic tablets</a></li>   

                   </ul>

                   <!--Brands-->
                   <div id="sidebar_title">Brands</div>

                   <ul id="cats"> 
                       <li><a href='#'>HP</a></li><li><a href='#'>DELL</a></li><li><a href='#'>LG</a></li><li><a href='#'>Samsung</a></li><li><a href='#'>Apple</a></li><li><a href='#'>Motorola</a></li><li><a href='#'>Xiamoi</a></li><li><a href='#'>Huawei</a></li><li><a href='#'>Blackberry</a></li><li><a href='#'>HTC</a></li>                 </ul>
             </div>

                  <!--content area in pink color-->
                  <div id="content_area">
                      <div id="products_box">   

             <div class='single_product'>

             <h3>Moto G5 Plus (Lunar Grey, 32 GB)</h3>
             <img src='admin_area/product_images/motorola-moto-g5-plus-1.jpg' width='180' height='180' />
             <p><b>₹ 15999</b></p>

             </div>

             <div class='single_product'>

             <h3>xiamoi redmi note 3</h3>
             <img src='admin_area/product_images/Redmi-Note3-32GB-SDL881680011-2-1b99d.jpg' width='180' height='180' />
             <p><b>₹ 9999</b></p>

             </div>

             <div class='single_product'>

             <h3>Dell Vostro 15 3558 15.6-inch Laptop</h3>
             <img src='admin_area/product_images/Dell Vostro 15 3558 15.6-inch Laptop.jpg' width='180' height='180' />
             <p><b>₹ 28000</b></p>

             </div>

             <div class='single_product'>

             <h3>Iphone 6 (32 GB)</h3>
             <img src='admin_area/product_images/SP705-iphone_6-mul.png' width='180' height='180' />
             <p><b>₹ 30000</b></p>

             </div>
                          </div>



             </div>

         </div>

         <!--Content wrapper ends here-->
         <div id="footer">
         <h2 style="text-align:center; padding-top:30px;">&copy; 2017 by Technohub

         </div>  

   </div>
<!--Main Container ends here-->
</body>
</html>

请详细解释我是新手

2 个答案:

答案 0 :(得分：2)

您多次使用相同的ID，

ID必须是唯一的，

所以改用一个类

代替<div id='single_product'>使用类似<div class='single_product'>

的内容

然后在CSS 

.single_product{
    float:left; 
    margin-left:20px; 
    padding:10px;
}

在编辑问题后回答

  • 以下是使用flexbox
    • 改进的代码 

#products_box {
  display: flex;
  flex-wrap: wrap;
  max-width: 780px;
  justify-content: center;
  text-align:center;
  /*demo*/
  background: pink
}

.single_product {
  padding: 10px;
}
<!--content area in pink color-->
<div id="content_area">
  <div id="products_box">
    <div class='single_product'>
      <h3>Moto G5 Pluspl (Lunar Grey, 32 GB)</h3>
      <img src='//placehold.it/180' />
      <p><strong>₹ 15999</strong></p>
    </div>
    <div class='single_product'>
      <h3>xiamoi redmi note 3</h3>
      <img src='//placehold.it/180' />
      <p><strong>₹ 9999</strong></p>
    </div>
    <div class='single_product'>
      <h3>Dell Vostro 15 3558 15.6-inch Laptop</h3>
      <img src='//placehold.it/180' />
      <p><strong>₹ 28000</strong></p>
    </div>
    <div class='single_product'>
      <h3>Iphone 6 (32 GB)</h3>
      <img src='//placehold.it/180' />
      <p><strong>₹ 30000</strong></p>
    </div>
  </div>
</div>

答案 1 :(得分：1)

供将来参考：

  1. 正如@dippas所述，ID必须是唯一的。
  2. 现在您只需 清除缓存和Cookie 即可使用。
相关问题
最新问题