在网格块中的元素 / 之后插入 break 或 space

Question

我有一个专辑缩略图的网格页面，2 列和 3 行。然而，在第三行，我在对齐行中的两个项目时遇到问题...

我一直在尝试在 this page 上的每个相册缩略图之后插入一个 css 分隔符...在相册之间插入一个示例似乎可以解决第三行中的错位问题。 .. 即在 drupal 页面的 php tpl 中插入 br clear all，例如在第五张专辑拇指上：

<br clear="all">

<div data-thmr="thmr_223" class="break-media node node-media-gallery node-teaser mg-gallery mg-teaser clearfix" id="node-136">

          <h4><a href="/gallery/philippine-development-forum-on-bangsamoro-davao-city-november-5-and-6-2014">The Philippine Development Forum on the Bangsamoro, Davao City, November 5 and 6, 2014</a></h4>

      <div data-thmr="thmr_227" class="media-collection-item-wrapper media-gallery-draggable-processed draggable"><div class="draggable-wrapper"><a class="draggable-handle">Drag</a></div><img src="/sites/all/modules/media_gallery/images/stack_bg.png" class="stack-image"><div data-thmr="thmr_231" class="media-gallery-item"><div class="top"><div class="top-inset-1"><div class="top-inset-2"></div></div></div><div class="gallery-thumb-outer"><div class="gallery-thumb-inner"><a data-thmr="thmr_232 thmr_233" class="media-gallery-thumb" href="/gallery/philippine-development-forum-on-bangsamoro-davao-city-november-5-and-6-2014"><img width="450" height="300" data-thmr="thmr_228 thmr_229 thmr_230" alt="" src="http://www.mtf.ph/sites/default/files/styles/media_gallery_thumbnail/public/media-gallery/2015the-philippine-development-forum-on-the-bangsamoro-davao-city-november-5-and-6-2014/photo-placement-1_2.jpg?itok=tgjurGwY"></a></div></div><div class="bottom"><div class="bottom-inset-1"><div class="bottom-inset-2"></div></div></div></div></div>    </div>

但是我在模板 php 页面中插入 class 时遇到问题，因此正在 css 中寻找任何替代方案... 然而，即使显示（内联或块）或添加填充和边距，我似乎也无法正确处理...感谢任何建议

Answer 1

您是否考虑过使用 flex 对齐元素？

Answer 2

作为快速修复，您可以尝试将 min-height: 400px; 添加到 .mg-col .mg-gallery.mg-teaser class，但您需要使用媒体查询调整 400px 以适应不同的屏幕宽度。

在网格块中的元素 / 之后插入 break 或 space

insert break or space after element / in grid block

css

break