浮动盒子在打印时不会漂浮

Question

仅仅是我还是浏览器在打印具有浮动（列）布局的页面时遇到了麻烦？

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

CSS：

/* Dead Simple Grid (c) 2012 Vladimir Agafonkin */

.col {
    padding: 0 1.5em;
}
.row .row {
    margin: 0 -1.5em;
}

.row:before, .row:after {
    content: "";
    display: table;
}
.row:after {
    clear: both;
}

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

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

/* Personal style addons */

section.col {
    background: #eee;
    border: 1px solid black;
}
.c50 {
    width: 20%;
}

HTML：

<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>

演示：http://jsfiddle.net/Y675e/。你可以清楚地看到有两列。

现在，当我转到http://jsfiddle.net/Y675e/show并在浏览器中查看时，它仍然是两列。

但是当我打印同一页面时，我会得到这样的东西：

所以浮动布局似乎已经消失了。但问题不在于<div>太宽。它们仅占屏幕宽度的20％，并且应该适合相同的线条。我该如何解决此印刷问题？

Answer 1

我明白了。注意col：

上的媒体查询

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

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

你必须摆脱only screen部分，否则.col将不会浮动。