@dpopov29033

Как сделать карточки в ряд?

Я с помощью php циклом вывожу карточки товаров. Их количество зависит от количества записей в mysql.
Не знаю почему но карточки выводятся в столбик, а хотелось бы в ряд. Помогите кто нибудь пожалуйста)
Вопрос наверное больше относится к верстке.
R::close();

$link = mysqli_connect("localhost", "root", "", "redbeen");

$result = mysqli_query($link, "SELECT * FROM tblproduct");
$num_rows = mysqli_num_rows($result);
while ($x<$num_rows) {
$x++; // Увеличение счетчика
$tblproduct = R::load('tblproduct', $x);
echo
'<div class="card m-3" style="width: 18rem;">
  <img class="card-img-top" src="'.$tblproduct->image.'" alt="">
  <div class="card-body">
    <p class="card-text">'.$tblproduct->name.'</p>
  </div>
</div>
</div>';
}
  • Вопрос задан
  • 193 просмотра
Решения вопроса 1
shevchenko__k
@shevchenko__k
Помогаю новорожденным web программистам
попробуй этот шаблон если у тебя bootstrap
<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Siverius
Как вариант - использовать css
.card{display: inline-block;}
Ответ написан
KickeRocK
@KickeRocK
FrontFinish
Все карточки оберните в .row
те эхо сделайте до цикла с <div class="row">
и в конце(после цикла) закройте
.row {
display: flex;
flex-wrap: wrap;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы