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

如何为砌体创造良好的印花风格

3 个答案: