Css 打印时浮动框不会浮动

只是我还是浏览器在打印浮动列布局的页面时遇到了真正的问题

例如，以下HTML+CSS将在屏幕上与在纸上输出截然不同的结果：

CSS: HTML: 演示：。您可以清楚地看到，有两列

现在，当我转到并在浏览器中查看它时，它仍然是两列

但当我打印出同一页时，我得到了这样的东西：

---

因此，浮动布局似乎已经消失。但问题不在于这些问题太广泛。它们只占屏幕宽度的20%，应该适合同一条“线”。我该如何着手解决这个打印问题呢？

我想出来了。请注意col上的媒体查询：

@media only screen {
    .col {
        float: left;
        width: 100%;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
}

你必须去掉唯一的屏幕部分，否则.cols根本不会浮动

<div class="row">
    <section class="col c50">
        <h1>A bizarrely long heading that should work.</h1>
    </section>
    <section class="col c50">
        <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
    </section>
</div>

@media only screen {
    .col {
        float: left;
        width: 100%;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
}