Question

我真的需要优化此页面（http://filipcz.ideatech.cz/mproj/components/tisk.php）以便在纸张上打印（标准A4纸张尺寸）。我的页面在Chrome，IE或Edge中运行良好，但Firefox显示效果不佳。

//编辑：尝试描述更清楚，我真正需要实现的内容：我将Střední průmyslová škola Edvarda Beneše a Obchodní akademie Břeclav替换为Some text on the left，将Seznam projektů替换为Text on the right side。

代码：

...
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Databáze maturitních projektů</title>
    <style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    td { padding-left: 15px; padding-right: 15px; }
    @media print{
        .netisk{
            visibility: hidden;
        }
    }
    </style>
...

...
    <div align="center" class="netisk">
        <input type="button" value="Vytisknout" onclick="window.print();">
        <input type="button" value="Zavřít okno" onclick="window.close();">
        <hr style="width:30%;">
    </div>
    <div style="float: left;">
        <i>Some text on the left</i>
    </div>
    <div style="float: right;">
        <i>Text on the right side</i>
    </div>
    <hr style="width:100%;">
    <div align="center">

<table cellspacing='0'><thead><tr><th> ID </th><th> Název projektu </th><th> Kategorie </th><th> Autor </th><th> Třída </th><th> Rok </th><th> Vedoucí práce </th></tr></thead><tbody><tr><td>1</td><td>Databáze projektů (PHP + MySQL)</td><td>Webové stránky</td><td>Filip Krolop</td><td>EL 4.A</td><td>2015/2016</td><td>zavodny</td></tr><tr><td>2</td><td>Vytvoření jednoduchého herníhu prostředí v Unreal Enginu 4</td><td>Unity</td><td>Viktor Krčma</td><td>EL 4.A</td><td>2015/2016</td><td>kotlarik</td></tr><tr><td>3</td><td>Návrh podnikové sítě a její simulace v Packet tracer</td><td>Sítě</td><td>Michal Kubík</td><td>EL 4.A</td><td>2015/2016</td><td>kotlarik</td></tr></tbody></table>
    </div>
...

有没有办法使用CSS或HTML解决这个问题？

非常感谢您的帮助。

Answer 1

试试这个，我只删除了浮子和放大器。添加了HTML，head＆amp;身体标签

<html>  
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>Databáze maturitních projektů</title>
    <style>
    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
      }
    td { padding-left: 15px; padding-right: 15px; }
   </style>
   </head>
   <body>
   <div align="center" class="netisk">
    <input type="button" value="Vytisknout" onclick="window.print();">
    <input type="button" value="Zavřít okno" onclick="window.close();">
    <hr style="width:30%;">
</div>
<div>
    <i>Střední průmyslová škola Edvarda Beneše<br>
    a Obchodní akademie Břeclav</i>
</div>
<div>
    <i>Seznam projektů</i>
</div>
<hr style="width:100%;">
<div align="center">

 <table cellspacing='0'><thead><tr><th> ID </th><th> Název projektu </th>     <th> Kategorie </th><th> Autor </th><th> Třída </th><th> Rok </th><th> Vedoucí    práce </th></tr></thead><tbody><tr><td>1</td><td>Databáze projektů (PHP + MySQL)</td><td>Webové stránky</td><td>Filip Krolop</td><td>EL 4.A</td><td>2015/2016</td><td>zavodny</td></tr><tr><td>2</td><td>Vytvoření jednoduchého herníhu prostředí v Unreal Enginu 4</td><td>Unity</td><td>Viktor Krčma</td><td>EL 4.A</td><td>2015/2016</td><td>kotlarik</td></tr><tr><td>3</td><td>Návrh podnikové sítě a její simulace v Packet tracer</td><td>Sítě</td><td>Michal Kubík</td><td>EL 4.A</td><td>2015/2016</td><td>kotlarik</td></tr></tbody></table>
</div>
</body> 
</html>

如果你想让它显示在右边，只需在代码中更改它。我将“Seznamprojekt ......”放在同一个div中并将其浮动到右侧

    <div>
    <i>Střední průmyslová škola Edvarda Beneše<br>
    a Obchodní akademie Břeclav</i>
     <i style="float:right">Seznam projektů</i>
     </div>

Answer 2

也许在破损的div上尝试漂浮。

Answer 3

从左div中删除float：left，并将inline-block添加到以下div中。这适用于chrome和firefox。

<div style="display:inline-block">
    <i>Střední průmyslová škola Edvarda Beneše<br>
    a Obchodní akademie Břeclav</i>
</div>
<div style="display:inline-block; float:right">
    <i>Seznam projektů</i>
</div>

Answer 4

也许你可以使用

<div style="border-top:1 solid ....>

而不是

<hr>

HTML，CSS - 在Firefox

4 个答案: