Question

我在编写自己的Wordpress主题时遇到了问题。我在我的主页上显示了每个博文的图片。我想让它看起来像一个画廊。所以我希望图像彼此相邻并且彼此相邻，尽管它们的大小不同。看到图片，看看我走了多远：

所以我想要完成的是，在纽约展示开花图像，然后在'c'est la vie'旁边展示。有什么办法吗？

我真的很感谢你的帮助！我的HTML代码：

<div class="post">

   <div class="outer-wrapper">
      <div class="imagefilter">
         <a href='<?php the_permalink(); ?>'><?php 
 the_post_thumbnail('mythumbnail');?></a>
       </div>

          <div class="text-wrapper">
          <span class="blogpost"><h2 class="post-title"><a href="<?php 
          the_permalink(); ?>"><?php the_title(); ?></a></h2></span>
       </div>   
    </div>

  </div>

我的CSS看起来像这样：

.outer-wrapper {
  position: relative;
  width: 470px;
  height: 100%;
  margin: 0px;
   padding: 0px;
  float: left;}


 .text-wrapper {
  position: absolute;
  width: 470px;
  text-align: center;
  font-size: 12px;
   display: table;
  top: 50%;
  height: 100%;
   line-height: 0px;
  opacity: 0;}

Answer 1

您正在寻找砖石画廊风格？如果是这样，这与CSS有关，这里是nice example。

主要思想是使用display：inline-block而不是float。例如 -

Dim Var1
If Wscript.Arguments.Count = 0 then
    WScript.Echo "Missing parameters"
Else
    Var1 = wscript.arguments(0)
    MsgBox "Passed in Variable: " + Var1
End If

Answer 2

使用CSS columns实现这一过程非常简单。 GitHub项目darlanmendonca/masonry-css使用these few lines of Sass执行此操作：

.masonry {
  $spacing: 2px;
  column-gap: $spacing;
  padding: $spacing;
  columns: 2;
  transform: translateZ(0);
  box-sizing: border-box;

  @media (min-width: 511px) {columns: 3;}
  @media (min-width: 769px) {columns: 4;}
  @media (min-width: 1440px) {columns: 6;}

  .masonry-item {
    width: 100%;
    display: block;
    border-bottom: $spacing solid transparent;
  }
}

结果如下图所示（取自darlanmendonca/masonry-css）。

Here's his live demo。（您在屏幕调整大小时看到的回流是由于响应断点改变了列数。）

对于懒惰，这是他的Sass的纯CSS编译和美化版本：

.masonry {
    -webkit-column-gap: 2px;
    -moz-column-gap: 2px;
    column-gap: 2px;
    padding: 2px;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-sizing: border-box
}
@media (min-width: 511px) {
    .masonry {
        -webkit-columns: 3;
        -moz-columns: 3;
        columns: 3
    }
}
@media (min-width: 769px) {
    .masonry {
        -webkit-columns: 4;
        -moz-columns: 4;
        columns: 4
    }
}
@media (min-width: 1440px) {
    .masonry {
        -webkit-columns: 6;
        -moz-columns: 6;
        columns: 6
    }
}
.masonry .masonry-item {
    width: 100%;
    display: block;
    border-bottom: 2px solid transparent
}

如果您不需要响应，则可以安全地终止媒体查询位并直接在.masonry上设置列数。

将不同尺寸的图像放在彼此之下

2 个答案: