Блог

 lt;?php   $active='Products'; include("includes/db.php"); include("functions/functions.php"); include("includes/header.php"); ?gt;   lt;div id="content"gt;lt;!-- #content Begin --gt;  lt;div class="container"gt;lt;!-- container Begin --gt;  lt;div class="col-md-12"gt;lt;!-- col-md-12 Begin --gt;    lt;ul class="breadcrumb"gt;lt;!-- breadcrumb Begin --gt;  lt;ligt;  lt;a href="index.php"gt;Homelt;/agt;  lt;/ligt;  lt;ligt;  lt;a href="shop.php"gt;Productslt;/agt;  lt;/ligt;  lt;/ulgt;lt;!-- breadcrumb Finish --gt;    lt;/divgt;lt;!-- col-md-12 Finish --gt;    lt;div class="col-md-3"gt;lt;!-- col-md-3 Begin --gt;    lt;?php     include("includes/sidebar.php");    ?gt;    lt;/divgt;lt;!-- col-md-3 Finish --gt;    lt;div class="col-md-9"gt;lt;!-- col-md-9 Begin --gt;  lt;?php   if(!isset($_GET['cat']))  {    echo "   lt;div class='box'gt;lt;!-- box Begin --gt;  lt;h1gt;All productslt;/h1gt;  lt;pgt;  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo deleniti accusamus, consequuntur illum quasi ut. Voluptate a, ipsam repellendus ut fugiat minima? Id facilis itaque autem, officiis veritatis perferendis, quaerat!  lt;/pgt;  lt;/divgt;lt;!-- box Finish --gt;   ";    }  ?gt;    lt;div class="row"gt;lt;!-- row Begin --gt;    lt;?php         if(!isset($_GET['cat'])){    $per_page=12;     if(isset($_GET['page'])){    $page = $_GET['page'];    }else{    $page=1;    }    $start_from = ($page-1) * $per_page;    $get_products = "select * from products order by 1 DESC LIMIT $start_from,$per_page";    $run_products = mysqli_query($con,$get_products);    while($row_products = mysqli_fetch_array($run_products))  {    $pro_id = $row_products['product_id'];    $pro_title = $row_products['product_title'];   $pro_price = $row_products['product_price'];   $pro_img = $row_products['product_img'];    echo "    lt;div class='col-4' gt;  lt;div class='product'gt;  lt;a href='details.php?pro_id=$pro_id'gt;  lt;img src='images/coins/$pro_img'gt;  lt;/agt;  lt;div class='text'gt;  lt;h4   style=' color: #555;   padding-top: 10px;     text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;'gt;  lt;a href='details.php?pro_id=$pro_id' style='text-decoration:none'gt; $pro_title lt;/agt;  lt;/h4gt;  lt;p class='price'gt;$pro_pricelt;/pgt;   lt;p class='buttons'gt;  lt;a class='btn btn-primary' href='details.php?pro_id=$pro_id'gt;   lt;i class='fa fa-shopping-cart'gt;lt;/igt; Add To Cart  lt;/agt; lt;/pgt;   lt;/divgt;  lt;/divgt;  lt;/divgt;  ";  }  ?gt;    lt;/divgt;lt;!-- row Finish --gt;    lt;centergt;  lt;ul class="pagination"gt;lt;!-- pagination Begin --gt;  lt;?php    $query = "select * from products";    $result = mysqli_query($con,$query);    $total_records = mysqli_num_rows($result);    $total_pages = ceil($total_records / $per_page);    echo "    lt;ligt;    lt;a href='shop.php?page=1'gt; ".'First Page'." lt;/agt;    lt;/ligt;    ";    for($i=1; $ilt;=$total_pages; $i  ){    echo "    lt;ligt;    lt;a href='shop.php?page=".$i."'gt; ".$i." lt;/agt;    lt;/ligt;    ";     };    echo "    lt;ligt;    lt;a href='shop.php?page=$total_pages'gt; ".'Last Page'." lt;/agt;    lt;/ligt;    ";    }        ?gt;     lt;/ulgt;lt;!-- pagination Finish --gt;  lt;/centergt;    lt;?php         getpcatpro()    ?gt;     lt;/divgt;lt;!-- col-md-9 Finish --gt;    lt;/divgt;lt;!-- container Finish --gt;  lt;/divgt;lt;!-- #content Finish --gt;        lt;?php   include("includes/footer.php");   ?gt;    lt;script src="js/jquery-331.min.js"gt;lt;/scriptgt;  lt;script src="js/bootstrap-337.min.js"gt;lt;/scriptgt;         lt;/bodygt;  lt;/htmlgt; 

Это изображение моего веб-сайта электронной коммерции, который загружает товары случайным образом, если их меньше 4 в строке.

Моя проблема в том, что, как вы можете видеть, изображение в последней строке размещено случайным образом. Если изображений меньше 4 в строке, как здесь, они размещаются в любом месте. Как заставить его каждый раз начинаться слева направо, независимо от того, сколько предметов. Извините, что игнорирую беспорядок, я абсолютный новичок и сделал это после нескольких уроков.

 .col-4 {  flex-basis: 25%;  padding: 10px;  min-width: 200px;  margin-bottom: 50px; } 

 lt;div class='col-4'gt;  lt;div class='product'gt;  lt;a href='details.php?pro_id=$pro_id'gt;  lt;img src='images/coins/$pro_img'gt;  lt;/agt;  lt;div class='text'gt;  lt;h4 style=' color: #555;   padding-top: 10px;     text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;'gt;  lt;a href='details.php?pro_id=$pro_id' style='text-decoration:none'gt; $pro_title lt;/agt;  lt;/h4gt;  lt;p class='price'gt;$pro_pricelt;/pgt;  lt;p class='buttons'gt;  lt;a class='btn btn-primary' href='details.php?pro_id=$pro_id'gt;  lt;i class='fa fa-shopping-cart'gt;lt;/igt; Add To Cart  lt;/agt;  lt;/pgt; 

Ваша наценка немного не в порядке. Я полагаю, что вы используете bootstrap 3, поэтому в этом случае вам нужно добавить строки, содержащие ваши столбцы, вот так:

 lt;div class="container"gt;  lt;div class="row"gt;  lt;div class="col-md-4"gt;.col-md-4lt;/divgt;  lt;div class="col-md-4"gt;.col-md-4lt;/divgt;  lt;div class="col-md-4"gt;.col-md-4lt;/divgt;  lt;/divgt; lt;/divgt;  

В вашем случае, начиная с вашего контейнера, оберните все дочерние столбцы в строку, как вы сделали для вложенного в div col-m-9.

 lt;?php $active = 'Products'; include("includes/db.php"); include("functions/functions.php"); include("includes/header.php"); ?gt;   lt;div id="content"gt;lt;!-- #content Begin --gt;  lt;div class="container"gt;lt;!-- container Begin --gt;  lt;div class="row"gt;  lt;div class="col-md-12"gt;lt;!-- col-md-12 Begin --gt;   lt;ul class="breadcrumb"gt;lt;!-- breadcrumb Begin --gt;  lt;ligt;  lt;a href="index.php"gt;Homelt;/agt;  lt;/ligt;  lt;ligt;  lt;a href="shop.php"gt;Productslt;/agt;  lt;/ligt;  lt;/ulgt;lt;!-- breadcrumb Finish --gt;   lt;/divgt;lt;!-- col-md-12 Finish --gt;   lt;div class="col-md-3"gt;lt;!-- col-md-3 Begin --gt;   lt;?php   include("includes/sidebar.php");   ?gt;   lt;/divgt;lt;!-- col-md-3 Finish --gt;  lt;div class="col-md-9"gt;lt;!-- col-md-9 Begin --gt;  lt;?php  if (!isset($_GET['cat'])) {   echo "   lt;div class='box'gt;lt;!-- box Begin --gt;  lt;h1gt;All productslt;/h1gt;  lt;pgt;  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo deleniti accusamus, consequuntur illum quasi ut. Voluptate a, ipsam repellendus ut fugiat minima? Id facilis itaque autem, officiis veritatis perferendis, quaerat!  lt;/pgt;  lt;/divgt;lt;!-- box Finish --gt;   ";   }  ?gt;   lt;div class="row"gt;lt;!-- row Begin --gt;   lt;?php    if (!isset($_GET['cat'])){   $per_page = 12;   if (isset($_GET['page'])) {   $page = $_GET['page'];   } else {   $page = 1;   }   $start_from = ($page - 1) * $per_page;   $get_products = "select * from products order by 1 DESC LIMIT $start_from,$per_page";   $run_products = mysqli_query($con, $get_products);   while ($row_products = mysqli_fetch_array($run_products)) {   $pro_id = $row_products['product_id'];   $pro_title = $row_products['product_title'];   $pro_price = $row_products['product_price'];   $pro_img = $row_products['product_img'];   echo "    lt;div class='col-4' gt;  lt;div class='product'gt;  lt;a href='details.php?pro_id=$pro_id'gt;  lt;img src='images/coins/$pro_img'gt;  lt;/agt;  lt;div class='text'gt;  lt;h4   style=' color: #555;   padding-top: 10px;     text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;'gt;  lt;a href='details.php?pro_id=$pro_id' style='text-decoration:none'gt; $pro_title lt;/agt;  lt;/h4gt;  lt;p class='price'gt;$pro_pricelt;/pgt;   lt;p class='buttons'gt;  lt;a class='btn btn-primary' href='details.php?pro_id=$pro_id'gt;   lt;i class='fa fa-shopping-cart'gt;lt;/igt; Add To Cart  lt;/agt; lt;/pgt;   lt;/divgt;  lt;/divgt;  lt;/divgt;  ";  }  ?gt;   lt;/divgt;lt;!-- row Finish --gt;   lt;centergt;  lt;ul class="pagination"gt;lt;!-- pagination Begin --gt;  lt;?php   $query = "select * from products";   $result = mysqli_query($con, $query);   $total_records = mysqli_num_rows($result);   $total_pages = ceil($total_records / $per_page);   echo "    lt;ligt;    lt;a href='shop.php?page=1'gt; " . 'First Page' . " lt;/agt;    lt;/ligt;    ";   for ($i = 1; $i lt;= $total_pages; $i  ) {   echo "    lt;ligt;    lt;a href='shop.php?page=" . $i . "'gt; " . $i . " lt;/agt;    lt;/ligt;    ";   };   echo "    lt;ligt;    lt;a href='shop.php?page=$total_pages'gt; " . 'Last Page' . " lt;/agt;    lt;/ligt;    ";   }    ?gt;   lt;/ulgt;lt;!-- pagination Finish --gt;  lt;/centergt;   lt;?php    getpcatpro()   ?gt;   lt;/divgt;lt;!-- col-md-9 Finish --gt;  lt;/divgt;  lt;/divgt;lt;!-- container Finish --gt; lt;/divgt;lt;!-- #content Finish --gt;   lt;?php  include("includes/footer.php");  ?gt;   lt;script src="js/jquery-331.min.js"gt;lt;/scriptgt; lt;script src="js/bootstrap-337.min.js"gt;lt;/scriptgt;   lt;/bodygt;  lt;/htmlgt;  

Наконец lt;centergt; , больше не действует наценка