1
我有以下的HTML和CSS結構。由DomPDF創建的PDF在視覺上被破壞
<!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。
是什麼原因造成的？我該如何解決這個問題？
你知道你的頁面寬度嗎？看起來你的CSS看起來比實際的PDF要寬，這可能會對整個PDF產生影響。另外，你使用的是什麼版本的DOMPDF？ CSS浮動屬性僅支持從版本0.6.0開始，並且默認情況下處於禁用狀態。在配置中使用'DOMPDF_ENABLE_CSS_FLOAT'來啓用它。 – Jeemusu