在列中打印动态数据

Question

我有一个测验，可以选择打印。我不知道测验有多少问题（来自json文件的动态数据），我希望打印页面在列中。每个页面将有2列。

我不知道每个问题有多长，我不想从左栏开始到右边结束。应该阻止一个完整的问题。

我试过这个插件：http://welcome.totheinter.net/columnizer-jquery-plugin/但是它不能正常工作（这个插件问题可以从左侧开始，在右侧结束）。

也（如果这有用）我正在使用bootstrap。

基本上，这就是我想要实现的目标：

Answer 1

为什么不使用普通的css3列属性和分页符？

style="column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;width:400px;height:200px"

li { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }

示例：

https://jsfiddle.net/jh2yeadf/3/

Answer 2

也有使用flexbox布局的选项，但据我记得它不适用于IE9（无法测试它。）

的CSS：

.container {
  background: blue;
  width: 100px;
  height: 100px;
  flex-direction: column;
  display: flex;
  flex-wrap: wrap;
}

.insider {
  background: white;
  height: 16px;
  width: 16px;
  margin: 2px;
}

HTML：

<div class="container">
  <div class="insider">1</div>
  ...
  <div class="insider">17</div>
</div>

为您准备一个小演示： https://jsfiddle.net/xpag09cw/

以及有关flexbox的更多信息 https://css-tricks.com/snippets/css/a-guide-to-flexbox/