Question

我的布局有一个容器div标签和一些嵌套的浮动div标签。我以这种方式使用它们有两个列效果（而不是表格单元格）。在网页上，一切都很好。但是当我打印时，漂浮的那些没有正确显示。它是一组2个容器div /浮动div，然后是一个全宽div标签（没有浮动）。这是代码：

<div style="margin-bottom: 5px; border-top: 1px solid #000000; padding: 5px; font-size: 0;">
  <div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;">
    <span style="font-weight: bold;">Provider: </span>
    Name here
  </div>
  <div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;">
    <span style="font-weight: bold;">Location: </span>
    Name<br/>
    Street Address<br/>
    City, State Zip<br/>
    Phone
  </div>
</div>

<div style="margin-bottom: 5px; border-top: 1px solid #000000; padding: 5px; font-size: 0;">
  <div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;">
    <span style="font-weight: bold;">Appointments:</span>
    <br />
    No appointments scheduled
  </div>
  <div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;">
    <span style="font-weight: bold;">Care Team:</span>
    <br />
    Name Here
  </div>
</div>

<div style="margin-bottom: 5px; padding: 5px; border-top: 1px solid #000000;">
  <span style="font-weight: bold;">Referrals:</span>
  <br />
  No referrals available
</div>

如上所述，所有内容都在网页上正确呈现。感谢@avrahamcool我修复了它，以便顶部边框线正确显示。但是，当我使用IE9时，我得到的内容如下：

提供者：这里的名字
位置：名称
街道地址
市，州邮编电话

预约：
没有预约任命 护理团队：
在此命名

推介：
没有推荐人

它在Chrome中运行良好。提供者/位置和约会/护理团队在打印时在边框线之间分为两列（并在屏幕上显示正常）

Answer 1

我已经完全重新创建了你的标记，所以我可以使用它。

this就是结果。（请注意这是多么美丽？）

我在IE10，IE9，IE8，FF，Chrome中测试过它。同样，从每一个印刷，它就像一个魅力。

如果你必须写你的HTML＆amp; CSS结合起来（我没有看到原因......但是我要判断谁）我将尝试帮助您将我的解决方案应用于HTML。

所以，主要的想法是完全失去float的东西，而是使用inline-block。

但是，inline-block为元素添加了额外的间距（由标记中的换行引起），导致50％略多于此，从而使列不适合一行。我用过很多技巧来解决这个问题。通过在容器上应用font-size:0;，并在他的孩子身上重新应用字体大小。另外，我必须verticaly-align:top;列。

总而言之，这是最终结果。

新的HTML标记

<div class="Container">
    <div class="Column">
        <span class="Header">Provider:</span>
        <span>Name here</span>
    </div>
    <div class="Column">
        <span class="Header">Location:</span>
        <span>Name</span>
        <br/>
        <span>Street Address</span>
        <br/>
        <span>City, State Zip</span>
        <br/>
        <span>Phone</span>
    </div>
</div>
<div class="Container">
    <div class="Column">
        <span class="Header">Appointments:</span>
        <br/>
        <span>No appointments scheduled</span>
    </div>
    <div class="Column">
        <span class="Header">Care Team:</span>
        <br/>
        <span>Name Here</span>
    </div>
</div>
<div class="Container">
    <span class="Header">Referrals:</span>
    <br/>
    <span>No referrals available</span>
</div>

新CSS

*
{
    margin: 0;
    padding: 0;
}
.Container
{
    margin-bottom: 5px;
    border-top: 1px solid #000000;
    font-size: 0;
}
    .Container *
    {
        font-size: medium;
    }
.Container .Column
{
    display: inline-block;
    width: 50%;
    vertical-align: top;
}
    .Container .Header
    {
        font-weight: bold;
    }

修改出于某种原因，我已经放弃了你的填充物。所以here是容器中填充物的小提琴（其余部分与之前相同）

编辑2内嵌式

<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;font-size: 0;"> <div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;"> <span style="font-weight: bold;">Provider:</span> <span>Name here</span> </div> <div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;"> <span style="font-weight: bold;">Location:</span> <span>Name</span> <br/> <span>Street Address</span> <br/> <span>City, State Zip</span> <br/> <span>Phone</span> </div> </div> <div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;font-size: 0;"> <div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;"> <span style="font-weight: bold;">Appointments:</span> <br/> <span>No appointments scheduled</span> </div> <div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;"> <span style="font-weight: bold;">Care Team:</span> <br/> <span>Name Here</span> </div> </div> <div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;"> <span style="font-weight: bold;">Referrals:</span> <br/> <span>No referrals available</span> </div>

内联式V2

所以，它可能是不适合你的字体修复。我很难调试，因为它对我来说很好。让我们尝试另一种方法。这次，我们将通过从标记中删除新行来消除列之间的间距。尝试这个新标记。

<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;"> <div style="display: inline-block;width: 50%;vertical-align: top;"> <span style="font-weight: bold;">Provider:</span> <span>Name here</span> </div><div style="display: inline-block;width: 50%;vertical-align: top;"> <span style="font-weight: bold;">Location:</span> <span>Name</span> <br/> <span>Street Address</span> <br/> <span>City, State Zip</span> <br/> <span>Phone</span> </div> </div> <div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;"> <div style="display: inline-block;width: 50%;vertical-align: top;"> <span style="font-weight: bold;">Appointments:</span> <br/> <span>No appointments scheduled</span> </div><div style="display: inline-block;width: 50%;vertical-align: top;"> <span style="font-weight: bold;">Care Team:</span> <br/> <span>Name Here</span> </div> </div> <div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;"> <span style="font-weight: bold;">Referrals:</span> <br/> <span>No referrals available</span> </div>

Answer 2

像这样

media =“print”：

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

这样做应该使它看起来与网页相同

并且依赖于像isherwood这样的浏览器，如果这就是你所指的那样。

带浮动的Div标签不能正确打印

2 个答案: