在Laravel中通过DOMDF生成的PDF中的一系列卡片循环播放问题

时间:2019-05-01 09:40:05

标签: css display dompdf

我正在使用Laravel构建应用程序。我已经使用DOMPDF生成了PDF ,并显示了一系列卡片。 第一张卡是静态的,而第二张卡/第二张卡是动态的(根据循环中来自后端的动态数据,使用循环显示多次)

除样式外,效果都很好,动态卡片从右侧的PDF文档中溢出。我想让它们以表格格式显示(每行2张),原因是我总共有6张卡(包括静态卡)...

CSS代码

.row1{
    display: table;
}

.registerph1{
    float: left;
    clear: left;
    position: absolute;
    margin-left: 2px;
    top: 63px;
}

.registerph4{
    float: left;
    clear: left;
    top: 180px;
    position: absolute;
    z-index: 5;
    margin-top: -4px;
    margin-left: 2px;
}

.phonecard6 {
    position: relative;
    background: #ba0c2f;
    width: 290px;
    height: 200px;
    margin-right: 10px;
    padding: 20px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius: 15px;
    overflow: hidden; 
    float: left;
}

.btm-right1{
    position: absolute;
    background: #000;
    z-index: -3;
    width: 690px;
    height: 710px;
    left: -260px;
    top: -330px;
    border-radius: 0 0 700px 0;
    transform: rotate(21deg);
} 

标记代码

 <!-- Row 1-->
    <div class="row1">

    <!-- Card 1-->
    <!-- Static card-->
    <div class="phonecard6">
        <div class="innerDiv6">
            <div>
                <img src="assets/images/logo.svg" alt="logo" class="cardLogo3" height="50" width="70">
                <img class="QR6" src="assets/images/qr.png" height="43" width="43">
            </div>

            <div class="registerph1">
                <label class="fm-input6"> Full Names </label> 
                <span class="fm-input6"> :  jhhjhsdjsdhsd </span>
            </div>  <br>

            <!-- Member No-->
            <div class="row registerph4">
                    <label class="fm-input6"> Effective Date</label> 
                    <span class="fm-input6"> :  ........... </span> <br>
                    <label class="fm-input6"> Expiry Date</label> 
                    <span class="fm-input6"> :   ........  </span>
                </div>
            <!-- END-->

        </div>
        <div class="btm-right1">
        </div>
    </div>
    <!-- End Card 1-->

     <!-- Card 2-->
     <!-- Displaying them dynamically-->
     @foreach($dpd as $d)
     <div class="phonecard6">
        <div class="innerDiv6">
            <div>
                <img src="assets/images/logo.svg" alt="logo" class="cardLogo3" height="50" width="70">
                <img class="QR6" src="assets/images/qr.png" height="43" width="43">
            </div>

            <div class="registerph1">
                <label class="fm-input6"> Full Names </label> 
                <span class="fm-input6"> :  jhhjhsdjsdhsd </span>
            </div>  <br>

            <!-- Member No-->
            <div class="row registerph4">
                    <label class="fm-input6"> Effective Date</label> 
                    <span class="fm-input6"> :  ........ </span> <br>
                    <label class="fm-input6"> Expiry Date</label> 
                    <span class="fm-input6"> :   .......... </span>
                </div>
            <!-- END-->
        </div>
        <div class="btm-right1">
        </div>
    </div>
    @endforeach
    <!-- End dependents-->
    </div>
    <!-- END Card 2-->

浏览器上的卡片图片 Cards Image displayed horizontally

0 个答案:

没有答案