0

ブログ用の注目の画像の小さなグリッドを構築するためのさまざまなソリューションを試しています。つまり、ブログ投稿にリンクするテキストが重ねられた最大 3 つの画像を水平に表示します。具体的には、最大で 3 つの画像が連続して表示されるため、さまざまな画面サイズに適切に対応する必要があります。したがって、次のようになります。

ここに画像の説明を入力

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

目の鋭い人は、paragraph-element が親の article-element の幅に適合していないことに気付くでしょう。したがって、質問には次の 2 つの要素があります。

  • オーバーレイされたテキストの段落の幅を親要素に合わせて制限しながら、画像間のスペースを確保し、行内で画像を均等に配置するにはどうすればよいですか?
  • Foundation のレスポンシブ グリッド (またはその他のコンポーネント) を使用して実装すると、画像が 1 行に収まるという制約が追加されて、どのようになりますか?
4

1 に答える 1

0

私がやろうとしていることを達成するために、グリッドやブロックグリッドよりもFoundation 6 のフレックスグリッド ( F6 ではデフォルトで有効になっていません。ソースと要旨を参照) を使用する方が簡単であることがわかりました。 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 と media-query CSS を使用して、ブロックを 1 行に制限します。大画面では 4 ブロック、中画面では 3 ブロック、小画面では 1 ブロックです。

JSFiddle-resultおよびSourceを参照してください。

于 2015-11-28T17:47:59.320 に答える