我正在使用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-->