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

Question

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

因为我正在使用 Foundation (6)，所以我想依赖它来实现响应式网格。我试过 Block Grids , 但在它们之间添加填充时保持覆盖文本的位置有问题。考虑以下示例(不使用 block 状网格，因为它们垂直堆叠):

.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>

细心的人会注意到段落元素不符合父文章元素的宽度。因此，这个问题有两个组成部分:

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

Answer 1

为了实现我打算做的事情，我发现使用 Foundation 6 的 Flex-Grid(F6 中的 not enabled by default，see source 和 Gist)比使用 Grid 或 Block-Grid 更容易，因为它更容易居中没有添加太多 CSS 的 block 。这是我找到的解决方案:

.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。
• block 使用内联 CSS(背景图像)来补偿不均匀的尺寸和灯箱兼容性，并通过渐变叠加均匀分布(对齐)。
• 叠加文本(带有彩色背景)。
• 使用 Foundation 和媒体查询 CSS 将 block 限制为一行:大屏幕上 4 个 block ，中等屏幕上 3 个 block ，小屏幕上 1 个 block 。

参见 JSFiddle-result和 Source .