jquery - 如何为 Masonry 创建良好的打印样式

Question

我制作了一个网页，其中包含使用 jquery masonry 插件的不同内容的项目。我想为此页面创建一个好的打印样式。打印时，我想显示此框的列表（从上到下）。对于这些打印样式，我使用下面的 css。由于某种原因，并非所有项目都显示在印刷版中，只有前五个项目。

@media print {
   #container .item{ display:block !important; float:none !important; 
                     position:relative !important; left:  !important; top:auto !important;  
                     overflow:visible !important; width: 100% !important; 
                     height: 100px !important; clear: left !important;
   }        
}

Answer 1

作为使用 Masonry 的简单 2 列站点上的打印样式，这对我来说效果很好。

.masonry-brick[style]
{
position:relative !important;
display:block !important;
left:0 !important;
top:auto !important;
float:left;
}

#container[style]
{
height:auto !important;
}

Answer 2

该left属性缺少一个值：

left:  !important;

Answer 3

我有砌体项目作为<figure>包含<a>图像上的链接<img>。

<div id="masonry-container">
  <figure>
    <a>
      <img />
    </a>
  </figure>
  ...
</div>

然后我这样解决：

  /* 
  Disable Masonry
  based on https://stackoverflow.com/a/13955084
  */

  #masonry-container {
    height:auto !important;
    max-width: 100%;
    text-align:center;
  }
  .masonry-item {
    position:relative !important;
    left:0 !important;
    top:auto !important;
    float: none !important;
    display: inline-block !important;
    padding: 0;
    margin-bottom: 3pt;
  }


  /* 
  Set items as inline-block at same height 
  */

  #masonry-container > figure,
  #masonry-container > figure > a,
  #masonry-container > figure > a > img {
    display: inline-block;
    height: 150pt;
    width: auto;
    max-width: 500pt;
  }