如何为 Masonry 创建良好的打印样式答案

【问题标题】：How to create a good print style for Masonry如何为 Masonry 创建良好的打印样式
【发布时间】：2012-10-23 20:15:49
【问题描述】：

我制作了一个网页，其中包含使用 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;
   }        
}

【问题讨论】：

标签： jquery css jquery-masonry jquery-isotope

【解决方案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;
}

【讨论】：

在 IE 11、Firefox 47 和 Chrome 52 上运行良好：D

【解决方案2】：

left 属性缺少值：

left:  !important;

【讨论】：

【解决方案3】：

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

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

【讨论】：