Question

基本上，我需要为每个三个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>

This should look like this

Answer 1

嗯，我还不能测试一下，但是试着把这个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>

Answer 2

不太确定div.row是否应该排在第二行，但是我希望您能理解。我只是在使用三元运算符来添加服务中间类：<?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 ?>

save

Answer 3

您面临的主要错误是：

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

应该是

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

有关更多信息：

How does true/false work in PHP?

如何在foreach循环中添加HTML？

3 个答案: