问题描述
我正在尝试为Laravel中的系统生成一个账单，为此我创建了一个刀片，其账单格式如下：
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bill</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<style type="text/css" media="all">
body { font-family: "Roboto",serif; font-size: 0.7rem; font-weight: 400; line-height: 1.4; color: #000000; }
.table { color: #000; }
.table td,.table th { border-top: 1px solid #000;
border-bottom: 1px solid #000;}
.table thead th { vertical-align: bottom; border-bottom: 2px solid #000; }
.small-heading{
font-size: 0.8rem;
border: groove;
}
#sign {
position: relative;
min-height: 150px;
}
#sign-content {
position: absolute;
bottom: 0;
}
#thankyou{
position: absolute;
bottom: 0;
right:0;
}
</style>
</head>
<body class="bg-light">
<div class="container-fluid pt-2" style="border:1px solid black;">
<!-- Invoice heading -->
<table class="table table-borderless">
<tbody>
<tr>
<td class="border-0">
<div class="row">
<div class="col text-center text-left mb-3">
<p>Counter</p>
</div>
<div class="col-md text-center mb-3 mb-md-0" style="min-width: 50%">
<h2 class="mb-1"> DIAMOND </h2>
</div>
<div class="col text-center text-md-right">
<p>Phone: 78787878789
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col">
<div class="table-responsive-xl" style="min-height: 500px">
<table class="table" style="margin-bottom: 0; width:100%;">
<thead>
<tr>
<th>क्र.सं.<br>S.N </th>
<th>Description of Goods</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td >Tilhari</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col-md mt-0 text-md-left mb-md-0" style="border-top:solid 1px black; border-right:solid 2px black;
border-bottom:solid 1px black;">
<p class="small-heading mb-2 text-center mt-3"> <strong>Carat</strong> </p>
<div class="row">
<div class="col-md-6 text-md-center">
24 Carat 100 <br>
</div>
<div class="col-md-6 text-md-center">
24 Carat 100<br>
</div>
</div>
</div>
<div class="col-md mb-3 mb-md-0" style="max-width:23% ;border-top:solid 1px black; border-right:solid 2px black; border-bottom:solid 1px black;">
<p class="small-heading mb-2 text-center mt-3"><strong>Imp</strong></p>
</div>
<div class="col-md mb-3 mb-md-0" style="border-top:solid 1px black; border-right:solid 2px black; border-bottom:solid 1px black;">
</div>
<div class="col" style="padding-left: 0">
<table class="table" style="margin: 0">
<tbody>
<tr>
<td colspan="12">
</td><td class="text-right">Total</td>
<td>$2,400.00</td>
</tr>
</tbody>
</table>
<div id="sign" class="col" style="height: 150px; border-bottom:1px solid black">
<span id="thankyou">Thank you!</span>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md">
<div class="row">
Email: <u></u>
</div>
</div>
<div class="col-md">
On Sale!
</div>
<div class="col-md text-center ml-5" >
<p style="text-align: left">981111111
</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
我已经使用dompdf生成了帐单，但是生成帐单后，它已成功生成，但是布局都被弄乱了。它与浏览器中的情况不同。
在浏览器中：
pdf：
如何解决此问题？
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）