添加额外字段时,DIV类会被推下来

时间:2016-08-07 02:36:49

标签: php html css

我有一个.php文件,当我向它添加三个额外的字段(以'Client Vehicle'开头)时,它会按下'div class'并创建大量的emtpy空间。事情最终只有两页而不是一页。相反,有一个很大的空白空间我的'div class'曾经是(它的一个名为'invoice-details'的表)

如果我拿走这些字段,一切都正确间隔。如何添加它们并将“发票详细信息”表重新放回原位?

这是我的css& php文件:

.clearfix:after {
  content: "";
  display: table;
  clear: both
}
a {
  color: #375bc8;
  text-decoration: underline
}
body {
  position: relative;
  width: 21cm;
  height: 29.7cm;
  margin: 0 auto;
  color: #3A3A3A;
  background: #FFFFFF;
  font-family: sans-serif;
  font-size: 14px
}
header {
  padding: 10px 0;
  margin-bottom: 30px
}
#logo {
  text-align: right;
  margin-bottom: 30px
}
#invoice-logo {
  max-height: 125px;
  text-align: right
}
.invoice-title {
  color: #375bc8;
  font-size: 2em;
  line-height: 1.4em;
  font-weight: normal;
  margin: 20px 0
}
#company {
  float: right;
  text-align: right;
  width: 40%
}
#client {
  float: left;
  width: 55%;
  margin-right: 5%
}
.invoice-details {
  text-align: right
}
.invoice-details table {
  border-collapse: collapse;
  border-spacing: 0;
  text-align: right;
  width: 40%;
  margin: 0 0 0 auto;
  font-size: 12px
}
.invoice-details table td {
  width: auto;
  margin: 0;
  padding: 0 0 0.5em 0
}
table.item-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 20px;
  font-size: 12px
}
table.item-table tr:nth-child(2n-1) td {
  background: #F5F5F5
}
table.item-table th {
  padding: 10px 15px;
  border-bottom: 1px solid #606060;
  white-space: nowrap;
  text-align: left
}
table.item-table th.text-right {
  text-align: right
}
table.item-table td {
  padding: 10px 15px
}
table.item-table .invoice-sums {
  text-align: right
}
footer {
  color: #878787;
  width: 100%;
  border-top: 2px solid #878787;
  padding: 8px 0
}
.text-right {
  text-align: right
}
.text-red {
  color: #ea5340
}
.text-green {
  color: #77b632
}
<html lang="<?php echo lang('cldr'); ?>">

<head>
  <meta charset="utf-8">
  <title>
    <?php echo lang( 'invoice'); ?>
  </title>
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/default/css/templates.css">
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/default/css/custom-pdf.css">
</head>

<body>
  <header class="clearfix">

    <div id="logo">
      <?php echo invoice_logo_pdf(); ?>
    </div>

    <div id="client">
      <div>
        <b><?php echo $invoice->client_name; ?></b>
      </div>
      <?php if ($invoice->client_vat_id) { echo '
      <div>' . lang('vat_id_short') . ': ' . $invoice->client_vat_id . '</div>'; } if ($invoice->client_tax_code) { echo '
      <div>' . lang('tax_code_short') . ': ' . $invoice->client_tax_code . '</div>'; } if ($invoice->client_address_1) { echo '
      <div>' . $invoice->client_address_1 . '</div>'; } if ($invoice->client_address_2) { echo '
      <div>' . $invoice->client_address_2 . '</div>'; } if ($invoice->client_city && $invoice->client_zip) { echo '
      <div>' . $invoice->client_city . ' ' . $invoice->client_zip . '</div>'; } else { if ($invoice->client_city) { echo '
      <div>' . $invoice->client_city . '</div>'; } if ($invoice->client_zip) { echo '
      <div>' . $invoice->client_zip . '</div>'; } } if ($invoice->client_state) { echo '
      <div>' . $invoice->client_state . '</div>'; } if ($invoice->client_country) { echo '
      <div>' . get_country_name(lang('cldr'), $invoice->client_country) . '</div>'; } echo '
      <br/>'; if ($invoice->client_phone) { echo '
      <div>' . lang('phone_abbr') . ': ' . $invoice->client_phone . '</div>'; } ?>
      <br/>
      <p>
        <?php echo 'Client Vehicle'; ?>
      </p>
      <p>
        <?php echo 'Year'; ?>:
        <?php echo $invoice->client_custom_year; ?></p>
      <p>
        <?php echo 'Make'; ?>:
        <?php echo $invoice->client_custom_make; ?></p>
      <p>
        <?php echo 'Model'; ?>:
        <?php echo $invoice->client_custom_model; ?></p>

    </div>
    <div id="company">
      <div><b><?php echo $invoice->user_name; ?></b>
      </div>
      <?php if ($invoice->user_vat_id) { echo '
      <div>' . lang('vat_id_short') . ': ' . $invoice->user_vat_id . '</div>'; } if ($invoice->user_tax_code) { echo '
      <div>' . lang('tax_code_short') . ': ' . $invoice->user_tax_code . '</div>'; } if ($invoice->user_address_1) { echo '
      <div>' . $invoice->user_address_1 . '</div>'; } if ($invoice->user_address_2) { echo '
      <div>' . $invoice->user_address_2 . '</div>'; } if ($invoice->user_city && $invoice->user_zip) { echo '
      <div>' . $invoice->user_city . ' ' . $invoice->user_zip . '</div>'; } else { if ($invoice->user_city) { echo '
      <div>' . $invoice->user_city . '</div>'; } if ($invoice->user_zip) { echo '
      <div>' . $invoice->user_zip . '</div>'; } } if ($invoice->user_state) { echo '
      <div>' . $invoice->user_state . '</div>'; } if ($invoice->user_country) { echo '
      <div>' . get_country_name(lang('cldr'), $invoice->user_country) . '</div>'; } echo '
      <br/>'; if ($invoice->user_phone) { echo '
      <div>' . lang('phone_abbr') . ': ' . $invoice->user_phone . '</div>'; } if ($invoice->user_fax) { echo '
      <div>' . lang('fax_abbr') . ': ' . $invoice->user_fax . '</div>'; } ?>
    </div>

  </header>

  <main>

    <div class="invoice-details clearfix">
      <table>
        <tr>
          <td>
            <?php echo lang( 'invoice_date') . ':'; ?>
          </td>
          <td>
            <?php echo date_from_mysql($invoice->invoice_date_created, true); ?></td>
        </tr>
        <tr>
          <td>
            <?php echo lang( 'due_date') . ': '; ?>
          </td>
          <td>
            <?php echo date_from_mysql($invoice->invoice_date_due, true); ?></td>
        </tr>
        <tr>
          <td>
            <?php echo lang( 'amount_due') . ': '; ?>
          </td>
          <td>
            <?php echo format_currency($invoice->invoice_balance); ?></td>
        </tr>
        <?php if ($payment_method): ?>
        <tr>
          <td>
            <?php echo lang( 'payment_method') . ': '; ?>
          </td>
          <td<?php echo $payment_method->payment_method_name; ?></td>
        </tr>
        <?php endif; ?>
      </table>
    </div>

    <h1 class="invoice-title"><?php echo lang('invoice') . ' ' . $invoice->invoice_number; ?></h1>

    <table class="item-table">
      <thead>
        <tr>
          <th class="item-name">
            <?php echo lang( 'item'); ?>
          </th>
          <th class="item-desc">
            <?php echo lang( 'description'); ?>
          </th>
          <th class="item-amount text-right">
            <?php echo lang( 'qty'); ?>
          </th>
          <th class="item-price text-right">
            <?php echo lang( 'price'); ?>
          </th>
          <?php if ($show_discounts) : ?>
          <th class="item-discount text-right">
            <?php echo lang( 'discount'); ?>
          </th>
          <?php endif; ?>
          <th class="item-total text-right">
            <?php echo lang( 'total'); ?>
          </th>
        </tr>
      </thead>
      <tbody>

        <?php foreach ($items as $item) { ?>
        <tr>
          <td>
            <?php echo $item->item_name; ?></td>
          <td>
            <?php echo nl2br($item->item_description); ?></td>
          <td class="text-right">
            <?php echo format_amount($item->item_quantity); ?>
          </td>
          <td class="text-right">
            <?php echo format_currency($item->item_price); ?>
          </td>
          <?php if ($show_discounts) : ?>
          <td class="text-right">
            <?php echo format_currency($item->item_discount); ?>
          </td>
          <?php endif; ?>
          <td class="text-right">
            <?php echo format_currency($item->item_subtotal); ?>
          </td>
        </tr>
        <?php } ?>

      </tbody>
      <tbody class="invoice-sums">

        <tr>
          <td <?php echo($show_discounts ? 'colspan="5"' : 'colspan="4"'); ?>class="text-right">
            <?php echo lang( 'subtotal'); ?>
          </td>
          <td class="text-right">
            <?php echo format_currency($invoice->invoice_item_subtotal); ?></td>
        </tr>

        <?php if ($invoice->invoice_item_tax_total > 0) { ?>
        <tr>
          <td <?php echo($show_discounts ? 'colspan="5"' : 'colspan="4"'); ?>class="text-right">
            <?php echo lang( 'item_tax'); ?>
          </td>
          <td class="text-right">
            <?php echo format_currency($invoice->invoice_item_tax_total); ?>
          </td>
        </tr>
        <?php } ?>

        <?php foreach ($invoice_tax_rates as $invoice_tax_rate) : ?>
        <tr>
          <td <?php echo($show_discounts ? 'colspan="5"' : 'colspan="4"'); ?>class="text-right">
            <?php echo $invoice_tax_rate->invoice_tax_rate_name . ' (' . $invoice_tax_rate->invoice_tax_rate_percent . '%)'; ?>
          </td>
          <td class="text-right">
            <?php echo format_currency($invoice_tax_rate->invoice_tax_rate_amount); ?>
          </td>
        </tr>
        <?php endforeach ?>

        <tr>
          <td <?php echo($show_discounts ? 'colspan="5"' : 'colspan="4"'); ?>class="text-right">
            <b><?php echo lang('total'); ?></b>
          </td>
          <td class="text-right">
            <b><?php echo format_currency($invoice->invoice_total); ?></b>
          </td>
        </tr>
        <tr>
          <td <?php echo($show_discounts ? 'colspan="5"' : 'colspan="4"'); ?>class="text-right">
            <?php echo lang( 'paid'); ?>
          </td>
          <td class="text-right">
            <?php echo format_currency($invoice->invoice_paid); ?>
          </td>
        </tr>
        <tr>
          <td <?php echo($show_discounts ? 'colspan="5"' : 'colspan="4"'); ?>class="text-right">
            <b><?php echo lang('balance'); ?></b>
          </td>
          <td class="text-right">
            <b><?php echo format_currency($invoice->invoice_balance); ?></b>
          </td>
        </tr>
      </tbody>
    </table>

  </main>

  <footer>
    <?php if ($invoice->invoice_terms) : ?>
    <div class="notes">
      <b><?php echo lang('terms'); ?></b>
      <br/>
      <?php echo nl2br($invoice->invoice_terms); ?>
    </div>
    <?php endif; ?>
  </footer>

</body>

</html>

这是我更新的.php文件,添加了div。新版本仅适用于我添加的新div,因为这是嵌套的?

<html lang="<?php echo lang('cldr'); ?>">
<head>
    <meta charset="utf-8">
    <title><?php echo lang('invoice'); ?></title>
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/default/css/templates.css">
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/default/css/custom-pdf.css">
</head>
<body>
<header class="clearfix">

    <div id="logo">
        <?php echo invoice_logo_pdf(); ?>
    </div>

    <div id="client">
        <div>
            <b><?php echo $invoice->client_name; ?></b>
        </div>
        <?php if ($invoice->client_vat_id) {
            echo '<div>' . lang('vat_id_short') . ': ' . $invoice->client_vat_id . '</div>';
        }
        if ($invoice->client_tax_code) {
            echo '<div>' . lang('tax_code_short') . ': ' . $invoice->client_tax_code . '</div>';
        }
        if ($invoice->client_address_1) {
            echo '<div>' . $invoice->client_address_1 . '</div>';
        }
        if ($invoice->client_address_2) {
            echo '<div>' . $invoice->client_address_2 . '</div>';
        }
        if ($invoice->client_city && $invoice->client_zip) {
            echo '<div>' . $invoice->client_city . ' ' . $invoice->client_zip . '</div>';
        } else {
            if ($invoice->client_city) {
                echo '<div>' . $invoice->client_city . '</div>';
            }
            if ($invoice->client_zip) {
                echo '<div>' . $invoice->client_zip . '</div>';
            }
        }
        if ($invoice->client_state) {
            echo '<div>' . $invoice->client_state . '</div>';
        }
        if ($invoice->client_country) {
            echo '<div>' . get_country_name(lang('cldr'), $invoice->client_country) . '</div>';
        }

        echo '<br/>';

        if ($invoice->client_phone) {
            echo '<div>' . lang('phone_abbr') . ': ' . $invoice->client_phone . '</div>';} ?>
		<br>
		<div>
			<b><?php echo '<u>Client Vehicle</u>'; ?>:</b>
			<br>
				<?php echo 'Year'; ?>:
					<?php echo $invoice->client_custom_year; ?>
			</br>
			<br>
				<?php echo 'Make'; ?>:
					<?php echo $invoice->client_custom_make; ?>
			</br>
			<br>
				<?php echo 'Model'; ?>:
					<?php echo $invoice->client_custom_model; ?>
			</br>
		</div>
    </div>
	
	
    <div id="company">
        <div><b><?php echo $invoice->user_name; ?></b></div>
        <?php if ($invoice->user_vat_id) {
            echo '<div>' . lang('vat_id_short') . ': ' . $invoice->user_vat_id . '</div>';
        }
        if ($invoice->user_tax_code) {
            echo '<div>' . lang('tax_code_short') . ': ' . $invoice->user_tax_code . '</div>';
        }
        if ($invoice->user_address_1) {
            echo '<div>' . $invoice->user_address_1 . '</div>';
        }
        if ($invoice->user_address_2) {
            echo '<div>' . $invoice->user_address_2 . '</div>';
        }
        if ($invoice->user_city && $invoice->user_zip) {
            echo '<div>' . $invoice->user_city . ' ' . $invoice->user_zip . '</div>';
        } else {
            if ($invoice->user_city) {
                echo '<div>' . $invoice->user_city . '</div>';
            }
            if ($invoice->user_zip) {
                echo '<div>' . $invoice->user_zip . '</div>';
            }
        }
        if ($invoice->user_state) {
            echo '<div>' . $invoice->user_state . '</div>';
        }
        if ($invoice->user_country) {
            echo '<div>' . get_country_name(lang('cldr'), $invoice->user_country) . '</div>';
        }

        echo '<br/>';

        if ($invoice->user_phone) {
            echo '<div>' . lang('phone_abbr') . ': ' . $invoice->user_phone . '</div>';
        }
        if ($invoice->user_fax) {
            echo '<div>' . lang('fax_abbr') . ': ' . $invoice->user_fax . '</div>';
        }
        ?>
    </div>

</header>

<main>

    <div class="invoice-details clearfix">
        <table>
            <tr>
                <td><?php echo lang('invoice_date') . ':'; ?></td>
                <td><?php echo date_from_mysql($invoice->invoice_date_created, true); ?></td>
            </tr>
            <tr>
                <td><?php echo lang('due_date') . ': '; ?></td>
                <td><?php echo date_from_mysql($invoice->invoice_date_due, true); ?></td>
            </tr>
            <tr>
                <td><?php echo lang('amount_due') . ': '; ?></td>
                <td><?php echo format_currency($invoice->invoice_balance); ?></td>
            </tr>
            <?php if ($payment_method): ?>
                <tr>
                    <td><?php echo lang('payment_method') . ': '; ?></td>
                    <td<?php echo $payment_method->payment_method_name; ?></td>
                </tr>
            <?php endif; ?>
        </table>
    </div>

    <h1 class="invoice-title"><?php echo lang('invoice') . ' ' . $invoice->invoice_number; ?></h1>

    <table class="item-table">
        <thead>
        <tr>
            <th class="item-name"><?php echo lang('item'); ?></th>
            <th class="item-desc"><?php echo lang('description'); ?></th>
            <th class="item-amount text-right"><?php echo lang('qty'); ?></th>
            <th class="item-price text-right"><?php echo lang('price'); ?></th>
            <?php if ($show_discounts) : ?>
                <th class="item-discount text-right"><?php echo lang('discount'); ?></th>
            <?php endif; ?>
            <th class="item-total text-right"><?php echo lang('total'); ?></th>
        </tr>
        </thead>
        <tbody>

        <?php
        foreach ($items as $item) { ?>
            <tr>
                <td><?php echo $item->item_name; ?></td>
                <td><?php echo nl2br($item->item_description); ?></td>
                <td class="text-right">
                    <?php echo format_amount($item->item_quantity); ?>
                </td>
                <td class="text-right">
                    <?php echo format_currency($item->item_price); ?>
                </td>
                <?php if ($show_discounts) : ?>
                    <td class="text-right">
                        <?php echo format_currency($item->item_discount); ?>
                    </td>
                <?php endif; ?>
                <td class="text-right">
                    <?php echo format_currency($item->item_subtotal); ?>
                </td>
            </tr>
        <?php } ?>

        </tbody>
        <tbody class="invoice-sums">

        <tr>
            <td <?php echo($show_discounts ? 'colspan="5"' : 'colspan="4"'); ?> class="text-right">
                <?php echo lang('subtotal'); ?>
            </td>
            <td class="text-right"><?php echo format_currency($invoice->invoice_item_subtotal); ?></td>
        </tr>

        <?php if ($invoice->invoice_item_tax_total > 0) { ?>
            <tr>
                <td <?php echo($show_discounts ? 'colspan="5"' : 'colspan="4"'); ?> class="text-right">
                    <?php echo lang('item_tax'); ?>
                </td>
                <td class="text-right">
                    <?php echo format_currency($invoice->invoice_item_tax_total); ?>
                </td>
            </tr>
        <?php } ?>

        <?php foreach ($invoice_tax_rates as $invoice_tax_rate) : ?>
            <tr>
                <td <?php echo($show_discounts ? 'colspan="5"' : 'colspan="4"'); ?> class="text-right">
                    <?php echo $invoice_tax_rate->invoice_tax_rate_name . ' (' . $invoice_tax_rate->invoice_tax_rate_percent . '%)'; ?>
                </td>
                <td class="text-right">
                    <?php echo format_currency($invoice_tax_rate->invoice_tax_rate_amount); ?>
                </td>
            </tr>
        <?php endforeach ?>

        <tr>
            <td <?php echo($show_discounts ? 'colspan="5"' : 'colspan="4"'); ?> class="text-right">
                <b><?php echo lang('total'); ?></b>
            </td>
            <td class="text-right">
                <b><?php echo format_currency($invoice->invoice_total); ?></b>
            </td>
        </tr>
        <tr>
            <td <?php echo($show_discounts ? 'colspan="5"' : 'colspan="4"'); ?> class="text-right">
                <?php echo lang('paid'); ?>
            </td>
            <td class="text-right">
                <?php echo format_currency($invoice->invoice_paid); ?>
            </td>
        </tr>
        <tr>
            <td <?php echo($show_discounts ? 'colspan="5"' : 'colspan="4"'); ?> class="text-right">
                <b><?php echo lang('balance'); ?></b>
            </td>
            <td class="text-right">
                <b><?php echo format_currency($invoice->invoice_balance); ?></b>
            </td>
        </tr>
        </tbody>
    </table>

</main>

<footer>
    <?php if ($invoice->invoice_terms) : ?>
        <div class="notes">
            <b><?php echo lang('terms'); ?></b><br/>
            <?php echo nl2br($invoice->invoice_terms); ?>
        </div>
    <?php endif; ?>
</footer>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

为新添加的元素添加div标记

 <div>
 <p>
    <?php echo 'Client Vehicle'; ?>
  </p>
  <p>
    <?php echo 'Year'; ?>:
    <?php echo $invoice->client_custom_year; ?></p>
  <p>
    <?php echo 'Make'; ?>:
    <?php echo $invoice->client_custom_make; ?></p>
  <p>
    <?php echo 'Model'; ?>:
    <?php echo $invoice->client_custom_model; ?></p>
</div>