响应式网格中的基础特色图像

Question

我正在尝试各种解决方案来为博客构建一个小的特色图像网格，即最多三个图像的水平显示，上面覆盖有指向博客的文本-post。具体来说，我需要它通过最多连续三个图像对不同的屏幕尺寸做出良好的响应。因此，像下面这样：

因为我正在使用 Foundation (6)，所以我想依靠它来实现响应式网格。我已经尝试了 Block Grids，但在它们之间添加填充时无法保持覆盖文本的位置。考虑以下示例（不使用块状网格，因为它们垂直堆叠）：

.featured .menu li {
  position: relative;
}
.featured .menu li article {
  margin: 0;
  padding: 0.25em;
}
.featured .menu li a {
  margin: 0;
}
.featured .menu li p {
  padding: 0.5em 0;
  margin: 0;
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  z-index: 2;
}
.featured .menu li p:after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .6;
  z-index: -1;
  background: #ffffff;
}
.featured .menu li img {
  display: block;
  z-index: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.min.css" rel="stylesheet" />
<div class="container featured">
  <ul class="menu expanded">
    <li>
      <article>
        <a href="#" rel="bookmark" title="Long Post Title" itemprop="url">
          <p>Long Post Title</p>
          <img src="http://placehold.it/200x150">
        </a>
      </article>
    </li>
    <li>
      <article>
        <a href="#" rel="bookmark" title="Long Post Title" itemprop="url">
          <p>Long Post Title</p>
          <img src="http://placehold.it/200x150">
        </a>
      </article>
    </li>
    <li>
      <article>
        <a href="#" rel="bookmark" title="Long Post Title" itemprop="url">
          <p>Long Post Title</p>
          <img src="http://placehold.it/200x150">
        </a>
      </article>
    </li>
  </ul>
</div>

眼尖的人会发现段落元素不符合父文章元素的宽度。因此，问题有两个组成部分：

如何限制重叠文本段落的宽度以适合父元素，同时允许图像之间 space 并在行内均匀分布？
使用 Foundation 的响应式网格（或其他组件）的实现会是什么样子，加上图像保持在一行的附加约束？

Answer 1

为了实现我打算做的事情，我发现使用 Foundation 6 的 Flex-Grid (not enabled by default in F6, see source and Gist) 而不是 Grid 或 Block-Grid 更容易，因为它很容易将块居中而无需添加太多 CSS。这是我找到的解决方案：

.featured {
  margin-top: 1em;
  margin-bottom: 1em;
}
.featured .column {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.featured .column {
  position: relative;
}
.featured .column article {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.featured .column article header {
  width: 100%;
  padding: 0.5em 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.featured .column header h3 {
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 1.5em;
  font-family: Open Sans, MundoSans, "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
  z-index: 1;
}
.featured .column header h3 span {
  padding: 2px;
  background-color: white;
  opacity: 0.8;
}
.featured .column section.post-image {
  display: block;
  z-index: 1;
  height: 14em;
  width: 100%;
  overflow: hidden;
  background-position: center;
}
.featured .column section.post-image img {
  opacity: 0;
}
.featured .column section.post-image:after {
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  z-index: 0;
  display: block;
  background: rgba(255, 255, 255, 0.2);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.8) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0.8)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.8) 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.8) 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.8) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.8) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
}
@media screen and (max-width: 32em) {
  /* Small: any screen */
  .featured .column:nth-child(n+2):nth-child(-n+10) {
    display: none;
  }
}
@media screen and (min-width: 32em) and (max-width: 64em) {
  /* Medium: any screen 640 pixels or wider */
  .featured .column:nth-child(n+4):nth-child(-n+10) {
    display: none;
  }
}
@media screen and (min-width: 64em) {
  /* Large: any screen 1024 pixels or wider */
  .featured .column:nth-child(n+5):nth-child(-n+10) {
    display: none;
  }
}

<link href="https://gist.githubusercontent.com/OleVik/f885e51ba3fe8a6d07e7/raw/4ad1d46ee2c1139528cc727d055be9bfe2912d41/foundation.flex.css" rel="stylesheet" />
<div class="container featured">
  <div class="row align-justify">
    <div class="small-12 medium-4 large-3 small-centered column">
      <article>
        <a href="#" rel="bookmark" title="Long Post Title" itemprop="url">
          <section class="post-image" style="background-image: url('http://placehold.it/500x150')">
            <img src="http://placehold.it/500x150" />
          </section>
          <header>
            <h3><span>Long Post Title</span></h3>
          </header>
        </a>

      </article>
    </div>
    <div class="small-12 medium-4 large-3 small-centered column">
      <article>
        <a href="#" rel="bookmark" title="Long Post Title" itemprop="url">
          <section class="post-image" style="background-image: url('http://placehold.it/500x150')">
            <img src="http://placehold.it/500x150" />
          </section>
          <header>
            <h3><span>Long Post Title</span></h3>
          </header>
        </a>

      </article>
    </div>
    <div class="small-12 medium-4 large-3 small-centered column">
      <article>
        <a href="#" rel="bookmark" title="Long Post Title" itemprop="url">
          <section class="post-image" style="background-image: url('http://placehold.it/500x150')">
            <img src="http://placehold.it/500x150" />
          </section>
          <header>
            <h3><span>Long Post Title</span></h3>
          </header>
        </a>

      </article>
    </div>
    <div class="small-12 medium-4 large-3 small-centered column">
      <article>
        <a href="#" rel="bookmark" title="Long Post Title" itemprop="url">
          <section class="post-image" style="background-image: url('http://placehold.it/500x150')">
            <img src="http://placehold.it/500x150" />
          </section>
          <header>
            <h3><span>Long Post Title</span></h3>
          </header>
        </a>

      </article>
    </div>
    <div class="small-12 medium-4 large-3 small-centered column">
      <article>
        <a href="#" rel="bookmark" title="Long Post Title" itemprop="url">
          <section class="post-image" style="background-image: url('http://placehold.it/500x150')">
            <img src="http://placehold.it/500x150" />
          </section>
          <header>
            <h3><span>Long Post Title</span></h3>
          </header>
        </a>

      </article>
    </div>
    <div class="small-12 medium-4 large-3 small-centered column">
      <article>
        <a href="#" rel="bookmark" title="Long Post Title" itemprop="url">
          <section class="post-image" style="background-image: url('http://placehold.it/500x150')">
            <img src="http://placehold.it/500x150" />
          </section>
          <header>
            <h3><span>Long Post Title</span></h3>
          </header>
        </a>

      </article>
    </div>
    <div class="small-12 medium-4 large-3 small-centered column">
      <article>
        <a href="#" rel="bookmark" title="Long Post Title" itemprop="url">
          <section class="post-image" style="background-image: url('http://placehold.it/500x150')">
            <img src="http://placehold.it/500x150" />
          </section>
          <header>
            <h3><span>Long Post Title</span></h3>
          </header>
        </a>

      </article>
    </div>
    <div class="small-12 medium-4 large-3 small-centered column">
      <article>
        <a href="#" rel="bookmark" title="Long Post Title" itemprop="url">
          <section class="post-image" style="background-image: url('http://placehold.it/500x150')">
            <img src="http://placehold.it/500x150" />
          </section>
          <header>
            <h3><span>Long Post Title</span></h3>
          </header>
        </a>

      </article>
    </div>
    <div class="small-12 medium-4 large-3 small-centered column">
      <article>
        <a href="#" rel="bookmark" title="Long Post Title" itemprop="url">
          <section class="post-image" style="background-image: url('http://placehold.it/500x150')">
            <img src="http://placehold.it/500x150" />
          </section>
          <header>
            <h3><span>Long Post Title</span></h3>
          </header>
        </a>

      </article>
    </div>
    <div class="small-12 medium-4 large-3 small-centered column">
      <article>
        <a href="#" rel="bookmark" title="Long Post Title" itemprop="url">
          <section class="post-image" style="background-image: url('http://placehold.it/500x150')">
            <img src="http://placehold.it/500x150" />
          </section>
          <header>
            <h3><span>Long Post Title</span></h3>
          </header>
        </a>

      </article>
    </div>
  </div>
</div>

它执行以下操作：

创建 Foundation 6 Flex-Grid。
块使用内联 CSS（背景图像）来补偿不均匀的尺寸和灯箱兼容性，并通过渐变叠加均匀分布（对齐）。
叠加文本（带有彩色背景）。
使用 Foundation 和媒体查询将块限制为一行 CSS：大屏幕上 4 个块，中等屏幕上 3 个块，小屏幕上 1 个块。

见JSFiddle-result and Source。

响应式网格中的基础特色图像

Foundation Featured Images in a Responsive Grid

html

css

zurb-foundation-6