Как добавить HTML в цикле foreach? - PullRequest
Новая
       62

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

0 голосов
/ 17 сентября 2018

В основном то, что мне нужно сделать, - это три деления и показать 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>

Это должно выглядеть следующим образом

Ответы [ 3 ]

0 голосов
/ 17 сентября 2018

Не совсем уверен, должен ли 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 голосов
/ 18 сентября 2018

Основная ошибка, с которой вы сталкиваетесь, такова: 

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

должно быть 

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

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

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

0 голосов
/ 17 сентября 2018

Хм, я пока не могу это проверить, но попробую поставить этот 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>
...