如何在foreach循环中添加html？

Basically what I need to do foreach three divs and show 5 services from the database.

I don't know how to do that. Can someone explain to me how? I try everything but just I have no idea how to do it. Second div should not be in row. Output be like on image link that I put below.

Thanks in advance.

<!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

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

3条回答默认最新

dongzhan1878 2018-09-17 17:17

关注

Hmm, I can't test this out yet but try to put this css; What it does is, were setting the height of .service-img.service to 50%. Then on the selector .service-middle>.service-img.service we're adding 100% height.

Do let me know if this worked and how it looked like on your screen. Thanks.

PS: dont run snippet, just use the css, bootstrap is not included.

.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>

</div>

报告相同问题？

关注问题

在foreach循环php中添加break行 php
2016-10-30 11:01

回答 1 已采纳 Try this: $myurl = file_get_contents('https://myurl.html'); $doc = new DOMDocument(); @$doc->l
如何使用PHP在单个foreach循环中将三个值添加到数据库中？ mysql php
2016-07-28 00:57

回答 2 已采纳 Without addressing any architectural issues, adding error-checking, or addressing security problem
每N次向foreach循环添加一个类 html php
2016-08-10 21:50

回答 7 已采纳 You can simply do this by using modulus operator with 3. Here is a pseudo code: if(div_number %
php在html中写循环,PHP和HTML：嵌套了HTML的嵌套foreach循环
2021-06-09 15:34

腾讯体育的博客现在我得到一个HTML 500.它可能是一个布局问题，或者它可能是一个PHP解释问题(可能不够深入？或PHP不可见的东西)，但我有问题确定哪个是罪魁祸首。我这样说是因为我有一个相当复杂的安排，我试图做。一个样品：//...
Foreach循环可以抑制重复但添加值 php
2017-06-06 14:03

回答 1 已采纳 Try this: $arr = array ( 0 => array ('User 1', 10, 10), 1 => array ('User 2
foreach循环中的PHP变量变量不起作用 php
2014-03-20 10:27

回答 3 已采纳 I'm not sure what you are trying to achieve but your code (simplified) works just fine: $a = arra
在foreach循环内容中显示广告 php
2011-12-23 14:29

回答 2 已采纳 You'll want to use the modulus $sn_count = 1; $html = ''; $display_ad_every = 3; foreach($points
php数组foreach循环添加键值对_php foreach 循环数组并设定key
2021-01-12 01:38

weixin_39928099的博客 foreach($role as $k=>$v){$arrayRole[$k=$v->role_id]=$v->role_code;}如题我写的 key 总是设置不了回复讨论(解决方案)怎么设置不了，print_r($role); 看看foreach($role as $k=>$v){$arrayRole[$v-&...
如何在foreach循环中的一个div中添加一个类 php
2013-02-13 18:05

回答 5 已采纳 $active = " active"; foreach($this->_options as $options){ $this->_html .= '<div cla
在横幅内使用循环foreach显示标题 php
2015-01-10 11:17

回答 1 已采纳 You can do the following <div class="slider-wrapper theme-default"> <div id="slider
PHP - 通过mysqli_fetch_array结果循环向行添加额外的产品 html php
2017-04-17 00:55

回答 2 已采纳 On the suggestion of Bagus Tesa, I took out the for each loop, edited the rest to account for that
php数组foreach循环添加键值对_在PHP的foreach循环中插入一个$key作为变量
2021-03-17 00:07

coderbest的博客我想对$lista_agregados中的每个键使用循环而不是显式操作： $somatorio_mensal['po'] = $po[0]['total'] + $po[1]['total']; $somatorio_mensal['brita'] = $brita[0]['total'] + $brita[1]['total']; 这是我到...
如何在html中为每个循环设置多个表结构？ [关闭] css html html5 php
2013-02-14 06:06

回答 1 已采纳 It is a little hard to figure this out without seeing the working example, but looking at the code
php数组foreach循环添加键值对_php 给数组增加键值对
2020-12-29 01:27

打不死的little强的博客 php给数组增加键值对的方法：首先创建一个PHP示例文件；...推荐：《PHP视频教程》php 中使用foreach为数组增加键值对在php中，使用foreach来遍历数组的频率很高，并且其性能要高于 list() 和 each() 结合来遍...
php数组foreach,PHP数组foreach循环
2021-04-04 08:27

达尔文小姐的博客 PHP教程 - PHP数组foreach循环foreach是一种特殊的循环语句，只适用于数组和对象。foreach可以以两种方式使用。retrieve just the value of each element, orretrieve the element"s key and value.语法获取值使用...
没有解决我的问题, 去提问

悬赏问题

¥15 HFSS 中的 H 场图与 MATLAB 中绘制的 B1 场部分对应不上
¥15 如何在scanpy上做差异基因和通路富集？
¥20 关于#硬件工程#的问题，请各位专家解答！
¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
¥30 截图中的mathematics程序转换成matlab
¥15 动力学代码报错，维度不匹配
¥15 Power query添加列问题
¥50 Kubernetes&Fission&Eleasticsearch
¥15 報錯：Person is not mapped，如何解決？

码龄粉丝数原力等级 --

如何在foreach循环中添加html？

3条回答默认最新

码龄粉丝数原力等级 --

悬赏问题

如何在foreach循环中添加html？

3条回答 默认 最新

悬赏问题

3条回答默认最新