将不同尺寸的图像放在一起答案

【问题标题】：Placing different sizes images underneath each other将不同尺寸的图像放在一起
【发布时间】：2017-04-19 22:36:23
【问题描述】：

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

所以我想要完成的是，在 New York 的下方和 '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;}

【问题讨论】：

你需要 Javascript。例如，您可以使用 masonry.desandro.com

标签： html css wordpress image thumbnails

【解决方案1】：

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

主要思想是使用 display: inline-block 代替 float。例如-

section {
 display: inline-block;
 margin:  0.25rem;
 padding:  1rem;
 width:  100%; 
 background:  #efefef;
}

【讨论】：

是的，这正是我要找的词 :) 但是由于某种原因，当我使用 inline-block 时，图像都在彼此下方
如果图像在容器内（可能是 div），那么您需要将 display: inline-block 添加到包装 div。如果它们仍然在另一个之下，那么可能有一个 100% 宽度的 div 或根本没有任何 CSS

【解决方案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 上设置您的列数。

【讨论】：