1

我有以下 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 &nbsp; &nbsp; &nbsp; EXCHANGE / NON-ERASMUS</p>
        </div>

        <!-- <div class="three columns">
            <p>&nbsp;</p>
        </div> -->

        <div class="sixteen columns bold-text centered-text">
            <p>Applying for: &nbsp; &nbsp; Fall Term 20 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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>&nbsp;</p>
        </div>

        <div class="eight columns border-right border-bottom border-left">
            <p>Place of Birth:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;City or Town / Country</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
        </div>

        <div class="eight columns border-right border-bottom">
            <p>Do you have a passport? &nbsp; &nbsp; &nbsp; &nbsp; (&nbsp; &nbsp;) yes &nbsp; &nbsp; &nbsp; &nbsp; (&nbsp; &nbsp;) 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 (&nbsp; &nbsp;) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Male (&nbsp; &nbsp;)</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>&nbsp;</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> &nbsp; </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> &nbsp; </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> &nbsp; &nbsp; &nbsp; &nbsp; (&nbsp; &nbsp;) Yes &nbsp; &nbsp; &nbsp; (&nbsp; &nbsp;) No</p>
        </div>

        <div class="sixteen columns">
            <p> &nbsp;</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>(&nbsp; &nbsp;) yes &nbsp; &nbsp; &nbsp; &nbsp; (&nbsp; &nbsp;) 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>(&nbsp; &nbsp;) yes &nbsp; &nbsp; &nbsp; &nbsp; (&nbsp; &nbsp;) 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>(&nbsp; &nbsp;) yes &nbsp; &nbsp; &nbsp; &nbsp; (&nbsp; &nbsp;) 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>(&nbsp; &nbsp;) yes &nbsp; &nbsp; &nbsp; &nbsp; (&nbsp; &nbsp;) 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>(&nbsp; &nbsp;) yes &nbsp; &nbsp; &nbsp; &nbsp; (&nbsp; &nbsp;) 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。

在此处输入图像描述

这是什么原因造成的?我该如何解决这个问题?

4

1 回答 1

0

您知道 PDF 文档的宽度(减去边距)吗?

由于Outgoing文本应该居中,很明显您的 HTML 比 PDF 文档宽得多。

您使用的是什么版本的 DOMPDF?CSS float 属性仅在 0.6.0 及更高版本中受支持,默认情况下处于禁用状态。在配置中使用DOMPDF_ENABLE_CSS_FLOAT以启用它。

不要以 px 为单位设置宽度,而是尝试使用百分比。

.container .eight.columns {
    width: 50%;
}
于 2013-09-23T01:04:19.680 回答