由DomPDF创建的PDF在视觉上被破坏了
我有以下HTML和CSS结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css" media="screen">
/* #Skeleton - Base 960 Grid
================================================== */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns { float: left; display: inline; margin-left: 0px; margin-right: 0px;}
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column,
.container .one.columns { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 920px; } /* was 940px */
.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }
/* Offsets */
.container .offset-by-one { padding-left: 60px; }
.container .offset-by-two { padding-left: 120px; }
.container .offset-by-three { padding-left: 180px; }
.container .offset-by-four { padding-left: 240px; }
.container .offset-by-five { padding-left: 300px; }
.container .offset-by-six { padding-left: 360px; }
.container .offset-by-seven { padding-left: 420px; }
.container .offset-by-eight { padding-left: 480px; }
.container .offset-by-nine { padding-left: 540px; }
.container .offset-by-ten { padding-left: 600px; }
.container .offset-by-eleven { padding-left: 660px; }
.container .offset-by-twelve { padding-left: 720px; }
.container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; }
/* #Site Styles
================================================== */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 100%;
font-family: Arial, sans-serif;
}
.border-top {
border-top: 1px solid black;
}
.border-right {
border-right: 1px solid black;
}
.border-bottom {
border-bottom: 1px solid black;
}
.border-left {
border-left: 1px solid black;
}
img {
width: 20%;
}
.blue-background {
background-color: #e1eaf5;
}
#photo-box {
position: absolute;
width: 150px;
height: 150px;
border: 1px solid black;
right: 40px;
top: 150px
}
#last-element {
margin-bottom: 30px;;
}
/* #Typography
================================================== */
h1 {
font-size: 24px;
}
p {
font-size: 16px;
padding-left: 3px;
}
em {
font-size: 12px;
}
.bold-text {
font-weight: 700;
}
.centered-text {
text-align: center;
}
.yellow-text {
background-color: #faff00;
}
</style>
</head>
<body>
<div class="container">
<div class="sixteen columns centered-text">
<h1>Erasmus / Exchange Öğrenci Başvuru Formu</h1>
</div>
<div class="twelve columns">
<img src="images/yeditepe-logo.png" alt="Yeditepe Logo" class="yeditepeLogo" />
</div>
<div class="four columns">
<p class="bold-text">YEDITEPE UNIVERSITY</p>
<em>OUTGOING PROGRAM</em>
</div>
<div class="sixteen columns">
<div id="photo-box" class="centered-text">
<p>PHOTO</p>
<em>resim ekleyiniz</em>
</div>
</div>
<div class="sixteen columns centered-text bold-text">
<p>OUTGOING</p>
<p>LLP - ERASMUS EXCHANGE / NON-ERASMUS</p>
</div>
<!-- <div class="three columns">
<p> </p>
</div> -->
<div class="sixteen columns bold-text centered-text">
<p>Applying for: Fall Term 20 Spring Term 20</p>
</div>
<div class="sixteen columns blue-background bold-text">
<p>1. PERSONAL INFORMATION</p>
</div>
<div class="eight columns border-top border-right border-bottom border-left">
<p>First Name:</p>
<p>Middle Name:</p>
</div>
<div class="eight columns border-top border-right border-bottom">
<p>Family Name:</p>
<p> </p>
</div>
<div class="eight columns border-right border-bottom border-left">
<p>Place of Birth: City or Town / Country</p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="eight columns border-right border-bottom">
<p>Do you have a passport? ( ) yes ( ) no</p>
<p>Passport Country:</p>
<p>Passport No:</p>
<p><span class="yellow-text">Passport No:</span></p>
</div>
<div class="eight columns border-right border-bottom border-left">
<p>Female ( ) Male ( )</p>
</div>
<div class="eight columns border-right border-bottom">
<p>Date of Birth<em>(dd/mm/yy)</em>:</p>
</div>
<div class="sixteen columns border-right border-bottom border-left">
<p>T.C. Kimlik Numarası:</p>
</div>
<div class="five columns border-bottom border-left">
<p>Contact Address:</p>
<p>City:</p>
</div>
<div class="eleven columns border-right border-bottom">
<p> </p>
<p>Postal Code:</p>
</div>
<div class="eight columns border-right border-bottom border-left">
<p class="bold-text">Student Contact Tel</p>
<p>GSM:</p>
<p>Home Number:</p>
<p>E-mail:</p>
<p> </p>
</div>
<div class="eight columns border-right border-bottom">
<p class="bold-text">Parent Contact Tel</p>
<p>GSM:</p>
<p>Home Number:</p>
<p>E-mail:</p>
<p>E-mail:</p>
</div>
<div class="sixteen columns blue-background centered-text">
<p>Write year and circle the semester</p>
</div>
<div class="sixteen columns">
<p> </p>
</div>
<div class="sixteen columns blue-background bold-text">
<p>2. ACADEMIC HISTORY AT YEDITEPE UNIVERSITY</p>
</div>
<div class="eight columns border-top border-left">
<p>Your Department:</p>
<p>Current CGPA:</p>
</div>
<div class="eight columns border-top border-right">
<p>* Subject Area Code: </p>
<em>(select from the list on page 3)</em>
</div>
<div class="sixteen columns border-right border-left">
<p><span class="bold-text">Attach one photocopy of your recent transcript with this form:</span> applications submitted without transcripts attached will not be evaluated.</p>
</div>
<div class="sixteen columns border-right border-bottom border-left">
<p>Are you on scholarship at Yeditepe? <em>Burslu öğrenci statüsünde misiniz?</em> ( ) Yes ( ) No</p>
</div>
<div class="sixteen columns">
<p> </p>
</div>
<div class="sixteen columns blue-background bold-text">
<p>3. HOST UNIVERSITY DETAILS</p>
</div>
<div class="sixteen columns">
<em>Please write the name of the university and country of the exchange program to which you are applying for</em>
</div>
<div class="sixteen columns blue-background border-top border-right border-left">
<p>1st Choice</p>
</div>
<div class="sixteen columns border-right border-left">
<p>Official Name of the University: .......................................................................................................... Erasmus ID Code: </p>
</div>
<div class="eight columns border-left">
<p>City:</p>
</div>
<div class="eight columns border-right">
<p>Country:</p>
</div>
<div class="sixteen columns border-right border-left">
<p>Contact e-mail for their international office: </p>
</div>
<div class="sixteen columns border-right border-left">
<p>Program of Study: .................................................................................................................................................................................................</p>
</div>
<div class="sixteen columns blue-background border-right border-left">
<p>2nd Choice</p>
</div>
<div class="sixteen columns border-right border-left">
<p>Official Name of the University: .......................................................................................................... Erasmus ID Code: </p>
</div>
<div class="eight columns border-left">
<p>City:</p>
</div>
<div class="eight columns border-right">
<p>Country:</p>
</div>
<div class="sixteen columns border-right border-left">
<p>Contact e-mail for their international office: </p>
</div>
<div class="sixteen columns border-right border-bottom border-left">
<p>Program of Study: .................................................................................................................................................................................................</p>
</div>
<div class="sixteen columns centered-text bold-text">
<p>Erasmus / Exchange Öğrenci Başvuru Formu</p>
</div>
<div class="sixteen columns border-top border-right border-bottom border-left">
<p>Program of Study ..............................................................................................................................................................................................</p>
</div>
<div class="sixteen columns centered-text bold-text">
<p>International study programs for a student to study abroad for one semester cost estimate is between 1500€ - 5000€ (euro) for transportation, housing, insurance, books, food, etc.</p>
</div>
<div class="four columns">
<p>( ) yes ( ) no</p>
</div>
<div class="twelve columns">
<p>Will you be able to financially support your semester abroad?</p>
<em>Yurt dışında geçireceğiniz semestre in maliyetini karşılayabilecek misiniz?</em>
</div>
<div class="four columns">
<p>( ) yes ( ) no</p>
</div>
<div class="twelve columns">
<p>Does your family agree with your decision to study abroad?</p>
<em>Aileniz yurt dışında bir semestre eğitim görme kararınız için izin veriyorlar rmı?</em>
</div>
<div class="four columns">
<p>( ) yes ( ) no</p>
</div>
<div class="twelve columns">
<p>Do you agree to provide the necessary documents to the International Office at Yeditepe in good order and on time?</p>
<em>Gereki dokümanları içeren dosyayı tam olarak ve zamanında Uluslararası Ofise teslim etmeyi kabul ediyor musunuz?</em>
</div>
<div class="four columns">
<p>( ) yes ( ) no</p>
</div>
<div class="twelve columns">
<p>Do you agree to go on your own to the appropriate consulate in good time with the required documents in order to obtain a visa?</p>
<em>Vize almak için gereken durumlarda konsolosluğa giderek vize işlemlerini kendiniz yapmayı kabul ediyor musunuz?</em>
</div>
<div class="sixteen columns">
<p class="bold-text">If you have answered ‘yes’ to all the above questions: <em>Yukarıdaki soruların hepsine ‘Evet’ yanıtı verdiniz ise</em></p>
</div>
<div class="sixteen columns">
<p>Do you understand that by agreeing to these commitments, if you are selected into a study abroad program, you agree to assume the responsibility of satisfying all financial requirements, presenting your documents and obtaining a visa, meeting deadlines, and fulfilling in general all obligations set forth by the regulations of the designated by the international study program?</p>
<em>Bu konularda gerekenleri yapmayı taahüt etmiş olarak öğrenci değişim programına kabul edilmeniz halinde bu program çerçevesinde belirtilen şartlara göre; mali gereksinimleri karşılamayı, gerekli dokümanları sunmayı, vizeyi almayı, program takvimine uymayı, genel şartları yerine getirmeyi taahhüt ediyormusunuz?</em>
</div>
<div class="sixteen columns centered-text">
<h1 class=""bold-text>( ) yes ( ) no</h1>
</div>
<div class="sixteen columns">
<p>I certify that the information given in this application is true, complete, and accurate to the best of my knowledge.</p>
<em>Bu başvuruda verdiğim bilgilerin hakikate uygun, tam, ve doğru olduğunu beyan ederim</em>
</div>
<div class="sixteen columns bold-text">
<p>Yeditepe University Student Registration ID Number:</p>
</div>
<div class="ten columns bold-text">
<p>Student’s Signature:</p>
</div>
<div class="six columns">
<p>Date<em>(dd/mm/yy)</em>:</p>
</div>
<div class="sixteen columns centered-text bold-text">
<p>TO BE COMPLETED by the Department Coordinator</p>
</div>
<div class="sixteen columns">
<p>_____ I have met with the student</p>
</div>
<div class="sixteen columns">
<p>_____ It has been discussed with the student if English is not the language of instruction; the student satisfies the level of language proficiency required by the host school in order to succeed in his/her courses</p>
</div>
<div class="sixteen columns">
<p>_____ I have informed the student of credits and any subject requirements needed to satisfy a full-load course curriculum during the period of studying abroad.</p>
</div>
<div class="sixteen columns centered-text bold-text">
<p>SUBMIT THIS COMPLETED FORM TO YOUR DEPARTMENT ERASMUS COORDINATOR</p>
</div>
<div class="sixteen columns border-top border-right border-left bold-text">
<p>Coordinator’s Name (full name printed):</p>
</div>
<div class="ten columns border-left bold-text">
<p>E-mail:</p>
</div>
<div class="six columns border-right bold-text">
<p>University Tel:</p>
</div>
<div class="ten columns border-bottom border-left bold-text">
<p>Department Coordinator Signature</p>
</div>
<div class="six columns border-right border-bottom bold-text" id="last-element">
<p>Date<em>(dd/mm/yy)</em>:</p>
</div>
</div><!-- container -->
<!-- End Document
================================================== -->
</body>
</html>
此结构在带有DomPDF的CodeIgniter项目中用于将结构转换为PDF。
该过程在PDF创建方面成功发生，但PDF的表示与预期的CSS完全不同。
以下是PDF示例。
造成这种情况的原因是什么？我该如何解决这个问题？
1 个答案:
答案 0 :(得分：0)
您知道PDF文档的宽度（减去边距）吗？
由于Outgoing文本应该居中，很明显您的HTML比PDF文档宽得多。
您使用的是什么版本的DOMPDF？ CSS float属性仅在0.6.0及更高版本中受支持，默认情况下处于禁用状态。在配置中使用DOMPDF_ENABLE_CSS_FLOAT启用它。
不要在px中设置宽度，而是尝试使用百分比。
.container .eight.columns {
width: 50%;
}
相关问题
- DOMPDF - 将创建的PDF附加到电子邮件中
- Dompdf在PDF上添加PDF图像
- 由DomPDF创建的PDF在视觉上被破坏了
- 当我使用波斯文本时，DomPDF输出被破坏
- 发布预览使用Laravel DOM pdf创建的pdf文档
- 使用在codeigniter中使用DOM PDF生成的新pdf附加已创建的pdf
- 如何通过来自autohotkey的WinHttpRequest发布请求下载dompdf创建的pdf
- 数字签名打破pdf由aspose .net创建的文件
- 在localserver上使用DOMPDF创建的PDF上没有显示图像
- 附加由dompdf创建的pdf并使用mime发送时包含意外字符串
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？