Фонд Избранные изображения в ответной сетке

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>

Острый глаз заметит, что этот пункт-элемент не соответствует ширине родительского статьи -элемент. Таким образом, вопрос состоит из двух компонентов:

• Как я могу ограничить ширину абзаца наложенного текста, чтобы соответствовать родительскому элементу, позволяя при этом пространство между изображениями и равномерным распределением их в строке?
• Какова будет реализация с использованием адаптивных гридов Foundation (или другого компонента) с добавленным ограничением на то, что изображения остаются в одной строке?

Answer 1

Чтобы добиться того, что я решил сделать, я нашел, что это проще, используя Foundation 6 в Flex-Grid (not enabled by default в F6, see source и Gist), а не сетки или блок-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>

Он делает следующее:

• Создает фонд 6 Flex-Grid.
• Блоки используют встроенный CSS (фоновое изображение), чтобы компенсировать неравномерные размеры и совместимость с лайтбокс и равномерно распределены (оправданы) с наложением градиента.
• Наложение текста (с цветным фоном).
• Ограничивает блоки до одной строки с использованием основы и медиа-запросов CSS: 4 блока на больших экранах, 3 на среднем, 1 на маленьком.

См. JSFiddle-result и Source.