Как добавить HTML в цикле foreach?

Question

Как добавить HTML в цикле foreach?

В основном то, что мне нужно сделать, — это три div и показать 5 сервисов из базы данных.

Я не знаю, как это сделать. Может кто-нибудь объяснить мне, как?
Я пробую все, но просто не знаю, как это сделать.
Второй div не должен быть в ряду.
Вывод будет как на картинке, которую я выложу ниже.

Заранее спасибо.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

<div class="row">
<div class="col-lg-12">
<div class="row">

<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image1.jpg); height: 300px; background-color: red;">
<figcaption>
<h3>Service Title Goes Here 1</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image2.jpg); height: 300px; background-color: green;">
<figcaption>
<h3>Service Title Goes Here 2</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
</div>

<div class="col-lg-4 service-middle">
<div class="service-img service" style="background-image: url(images/image3.jpg); height: 600px; background-color: blue;">
<figcaption>
<h3>Service Title Goes Here 3</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>

<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image4.jpg); height: 300px; background-color: yellow;">
<figcaption>
<h3>Service Title Goes Here 4</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image5.jpg); height: 300px; background-color: pink;">
<figcaption>
<h3>Service Title Goes Here 5</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
</div>

</div>
</div>
</div>

</div>

</body>
</html>

Это должно выглядеть так

0

counter foreach loops php procedural-programming

Решение

По вопросам рекламы [email protected]

Accepted Answer

Хм, я пока не могу это проверить, но попробую поставить этот CSS; Он установил высоту .service-img.service равным 50%. Затем на селекторе .service-middle> .service-img.service мы добавляем 100% высоты.

Дайте мне знать, если это сработало и как это выглядело на вашем экране. Благодарю.

PS: не запускайте сниппет, просто используйте css, начальная загрузка не включена.

.service-img.service {
height: 50%;
}

.height100{
height:100px;
}

.service-middle>.service-img.service{
height:100% !important;
}

<div class="container">

<div class="row">
<div class="col-lg-12">
<div class="row height100">


<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image1.jpg); height: 300px; background-color: red;">
<figcaption>
<h3>Service Title Goes Here 1</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image2.jpg); height: 300px; background-color: green;">
<figcaption>
<h3>Service Title Goes Here 2</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
</div>

<div class="col-lg-4 service-middle">
<div class="service-img service" style="background-image: url(images/image3.jpg); height: 618px; background-color: blue;">
<figcaption>
<h3>Service Title Goes Here 3</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>

<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image4.jpg); height: 300px; background-color: yellow;">
<figcaption>
<h3>Service Title Goes Here 4</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image5.jpg); height: 300px; background-color: pink;">
<figcaption>
<h3>Service Title Goes Here 5</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
</div>


</div>
</div>
</div>


</div>

0

Другие решения

Не совсем уверен, должен ли div.row идти во 2-й строке, но я надеюсь, что вы поняли идею.
Я просто использую троичный оператор, чтобы добавить сервис-средний класс: <?php echo $num == 2? 'sevice-middle' : '' ?>

<?php if ($num == 1): ?>
<div class="col-lg-4" <?php echo 'num= '.$num; ?> >
<?php endif ?>

<?php foreach ($services as $service): $num++; ?>

<div class="row">
<div class="sevice-img service <?php echo $num == 2? 'sevice-middle' : '' ?> " style="background-image: url(<?php echo 'images/'.$service['image']); ?>); height: 300px;">
<figcaption>
<h3><?php echo $service['title']; ?></h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>

<?php endforeach ?>

<?php if ($num > 0): ?>
</div>
<?php endif ?>

0

Основная ошибка, с которой вы столкнулись, заключается в следующем:

<?php if ($num == 1): ?>

должно быть

<?php if ($num === 1): ?>

Для получения дополнительной информации:

Как работает true / false в PHP?

0

Источник