Question

尝试重新编写另一个模板（效果很好并且用原始css3编写 - 但非常混乱）。

大多数东西很容易翻译成波旁威士忌/整洁，但我仍然坚持起来建立一个响应式图像网格。

<section class="page-content">
  {% for post in site.posts reversed %}
    <div class="myevent" style="background-image:url({{post.cover}});">
  {% endfor %}
</section>

在外部容器中我有一组动态生成的div（使用jekyll的诱人），在大屏幕上我有每个div占用span-columns（4）[我有媒体查询将列更改为8和4取决于宽度]。

每个div都有一个图像作为背景和一个标题文本标签。如果这是一个没有侧边框的固定屏幕（即每个div都是宽度的33％，那么添加33vw作为div高度就可以很方便了我的问题是让div成为正方形。因为我事先并不知道什么是屏幕宽度，外部容器有多少边填充，有多少列，如果有一个排水沟（通常是，但是在单列中没有）.....

.page-content {
  @include outer-container;
}

.myevent {
  @include span-columns(4);
  @include omega;
  //
  // has to be square - can't figure out how to calculate this
  //
}

.nth-element {
  // clear gutter every third
  @include omega(3n);
}

// I also have new-breakpoints at certain widths dropping to 8 and 4 columns automatically with corresponding omega(2n) and omega(1n) changes as the column totals change.

我不知道如何计算.myevent的实际宽度并将这些div的高度设置为等于宽度

Answer 1

一个可能的答案（以及我可能会使用的解决方案）是相对定位span-column对象并将内容绝对定位在其中。然后我会添加类似的东西：

.my-cool-column {
  position: relative;

  &::before {
    content: "";
    display: block
    padding-top: 100%;
  }
}

这将使填充顶部等于父元素的宽度。这应该工作。

波旁威士忌整齐的方格

1 个答案: