Question

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

当我使用Foundation（6）时，我想依赖它来响应Grid。我已经尝试了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>

敏锐的眼睛会注意到paragraph-element不符合父article-element的宽度。因此，这个问题有两个组成部分：

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

Answer 1

为了实现我的目标，我发现使用Foundation 6的Flex-Grid（F6中的not enabled by default，see source和Gist）而不是网格更容易或者Block-Grid，因为它可以很容易地在没有多少CSS的情况下使块居中。这是我登陆的解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

它执行以下操作：

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

请参阅JSFiddle-result和Source。

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

1 个答案: