Question

我想打印浏览器中显示的页面。

当页面上的图像很少时，大多数图像在打印过程中断开

http://fiddle.jshell.net/V7TuY/4/show/

在上面的示例中，如果您将尝试打印预览，您将看到图像将采用谁而不是显示而不是显示为单行。

如何在问题上解决此类问题

<div class="row">
    <div class="small-12 medium-2 medium-offset-1 columns">
        <img src="http://placehold.it/480x600&text=[img 1]" />
    </div>
    <div class="small-12 medium-2 columns">
        <img src="http://placehold.it/480x600&text=[img 1]" />
    </div>
    <div class="small-12 medium-2 columns">
        <img src="http://placehold.it/480x600&text=[img 1]" />
    </div>
    <div class="small-12 medium-2 columns">
        <img src="http://placehold.it/480x600&text=[img 1]" />
    </div>
    <div class="small-12 medium-2 columns end">
        <img src="http://placehold.it/480x600&text=[img 1]" />
    </div>
</div>

Answer 1

快速执行此操作的方法是添加如下的覆盖样式：

@media print {
  .large-1 {
    width: 8.33333%;
  }

  .large-2 {
    width: 16.66667%;
  }

  .large-3 {
    width: 25%;
  }

  etc.....
}

默认的Foundation网格宽度为12列，因此1/12大致等于8.33333％，您可以使用它来计算每个类的宽度。

小提琴：

http://jsfiddle.net/jordan90/uNjLu/3/

我想回答的主要原因是因为我没有足够的声誉来评论，我想告诉你如何在.NET中使用SASS。

Visual Studio中有一个名为SassyStudio的扩展程序，每次保存SASS文件时都会为您编译SASS中的CSS文件。我尝试了很多选项，SassyStudio是在Visual Studio中使用SASS启动和运行的最简单方法。如果将它与像Foundation5.MVC.Sass这样为您设置所有Foundation和SASS的NuGet包组合在一起，它可以让您在Visual Studio中快速开始使用Foundation with SASS。

如何在浏览器中显示zurb基础打印

1 个答案: