CSS начальной загрузки рассчитать количество столбцов - PullRequest
0 голосов
/ 01 ноября 2018

Я перепроектирую свой веб-сайт и хочу отображать записи в таблице на 4 строки в поперечнике и вниз, сколько бы строк им не требовалось.

У меня есть этот сценарий, с которым я играю часами, но я не получаю желаемого результата. На самом деле, это просто перечисление строки за строкой.

<div class="row">
<div class="col-3 col-12-medium">

<?php 
$finditems="Coffee Mugs - Ceramic";
$servername = '';
$username   = '';
$password   = '';
$dbname     = '';
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}$sql = "SELECT * FROM inventory WHERE product_subcategory LIKE '$finditems' 
AND(product_active='Y' OR product_active='C' OR product_active='O') AND 
web_sale<>'N' ORDER BY product_name ASC";
$result = $conn->query($sql);

if ($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {
    echo "<div class=''col-3 col-12-medium'>". $row["product_name"]. "  " . 
$row["product_code"]. " $" . $row["product_p1"]. "<br><img 
src='products/".$row['product_code'].".jpg' width='100' height='100'> 
</div>";
    }
} else {
echo "0 results";
}
?>
</div><div>

В некоторых результатах может быть найдено только 2 элемента, в других - 10 (в зависимости от условия поиска). Поэтому, когда есть несколько, он показывает следующий элемент справа, пока строка 4 не будет заполнена, затем он перейдет к следующей строке. Я знаю, что мне чего-то не хватает, чтобы рассчитать, но я просто не нахожу это.

Ваша помощь будет оценена.

1 Ответ

0 голосов
/ 01 ноября 2018

для устройств со средним экраном Это должно быть похоже на

<div class="col-md-3">....</div>

включите это во все элементы div, которые вы хотели разместить в столбце. и вы хотели адаптивный сайт просто добавьте это

<div class="col-sm-1 col-md-3 col-lg-4">....</div>

измените номера в соответствии с вашими потребностями.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...