0

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

在此处输入图像描述

当我使用 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>

敏锐的眼睛会注意到段落元素不符合父文章元素的宽度。因此，这个问题有两个组成部分：

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

1 回答 1

0

为了实现我的目标，我发现使用 Foundation 6 的 Flex-Grid（在 F6 中默认未启用，请参阅源代码和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和Source。

于 2015-11-28T17:47:59.320 回答