Как сделать картинки каждая с заголовком, выводились « встрочку», а если не помещаются переносились «на следующую строку»?

Question

[Алексей]

Как сделать картинки каждая с заголовком <h2-h6>, (нужны для других целей) выводились " встрочку", а если не помещаются переносились "на следующую строку"?
Т.е. картинки распологаются рядом, но если не помещаются,те что не помещаются переносились на новую сточку.
т.е. каждая картинка имеет такую структуру

<h5>Заголовок</h5>
<img src="http:..." alt="" width="" height="" />

пытался делать таблицей, но там ячейки не переносятся

Answer 1

[Пащук Илья]

Легко мой друг:

<div class="main-content">
   <div class="title-image">
     <h2>Заголовок</р2>
     <img src="http:..." alt="" width="" height="" />
   <div>
   <div class="title-image">
     <h2>Заголовок</р2>
     <img src="http:..." alt="" width="" height="" />
   <div>
<div>

<style>
  .main-content {
   display:flex;
   flex-flow: row wrap
}
  .title-image{
  display: inherit;
  flex-flow: column;
}
<style>

Плюс также сам заголовок можно позиционировать, и относительно в нутри контейнера по картинке, все зависит от задач!

Comments

[Владимир Мирка]

Выглядит слишком просто. Го усложнять х)

[Пащук Илья]

Владимир Мирка, Ну тут уже пусть автор упрощает или усложняет, все зависит от его задачи ему главное надо была конструкция с переносом!))

[Алексей]

А чтобы заголовок сделать по центру картинки что надо и куда написать?

[Пащук Илья]

Алексей selftrips.ru, можно просто заголовку применить свойство text-align: center, ну или если опиратся что у нас родитель flex, то тогда можно применить блоку который хотим отцентровать margin: 0 auto, если хотим по высоте то margin: auto 0, а если по центру то margin: auto, ну таже можно внутренний контент центровать через justify-content: center, align-items: center!

[Алексей]

Пащук Илья, если можно можете здесь примерами написать https://codepen.io/selftrips/pen/gmqZLW

[Пащук Илья]

Алексей selftrips.ru, если же речь идет чтобы заголовок сделать внутри картинки по центру блока, то тогда нужно

<style>
.main-content {
  display:flex;
  flex-flow: row wrap;
  margin: 10px;
}

.title-image{ 
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  margin: 10px;
  width:300px;
}

.image {
  display:block;
}

.title {
  position: absolute;
  z-index:1;
  width:100%;
  background:rgba(256,256,256,.5); 
  margin: auto;
  text-align:center;
  padding: 10px;
  max-width: inherit;
}
</style>

<div class="main-content">
   <div class="title-image">
     <h2 class="title">Заголовок</h2>
     <img class="image" src="http://www.tvovermind.com/wp-content/uploads/2017/11/alexis-ren-images-91257160-768x432.jpg" alt="" width="100%" height="auto">
   </div>
  
  <div class="title-image">
     <h2 class="title">Заголовок</h2>
     <img class="image" src="http://www.tvovermind.com/wp-content/uploads/2017/11/alexis-ren-images-91257160-768x432.jpg" alt="" width="100%" height="auto">
   </div>
  
  <div class="title-image">
     <h2 class="title">Заголовок</h2>
     <img class="image" src="http://www.tvovermind.com/wp-content/uploads/2017/11/alexis-ren-images-91257160-768x432.jpg" alt="" width="100%" height="auto">
   </div>
  
  <div class="title-image">
     <h2 class="title">Заголовок</h2>
     <img class="image" src="http://www.tvovermind.com/wp-content/uploads/2017/11/alexis-ren-images-91257160-768x432.jpg" alt="" width="100%" height="auto">
   </div>
</div>

[Пащук Илья]

Алексей selftrips.ru, я реализовал смотри на кодепене!

[Алексей]

Пащук Илья, решение интересно, только тогда, по логике, наверное надо сделать чтобы заголовок "пропадал" при наведении мыши
А что изменить что бы был самый простой сверху но по центру

[Пащук Илья]

Алексей selftrips.ru, чтобы в верху был align-items: flex-start; и в .title надо margin: 0 auto auto;
чтобы при наведении пропадал это просто:

.title-image::hover{
   . title { display: none; или visibility: hidden; или opacity: 0;}
}

[Алексей]

Пащук Илья, а как центрировать?
т.е. что вы все строчки полные и неполные были отцентрированы?
Спасибо еще раз!

[Алексей]

Пащук Илья, еще вылезла непонятная проблема в ie нормально а в ff иногда все криво! (прошлый раз неправильный выслал ) https://codepen.io/selftrips/pen/gmqZLW
1/ Как сделать заголовки сверху картинок по по центру картинок, с переносом, не шире картинок?
2/ Можно ли сделать чтобы блоки картинок не прижимались влево а располагались по центру (но сколько сколько влазит и без скрола, с переносом)
3/ наведение не отрабатывается почему то!

[Пащук Илья]

Алексей selftrips.ru,

.main-content {
  display:flex;
  justify-content: center;
  flex-flow: row wrap
}

.title-image{
  position: relative;
  display: inherit;
  flex-flow: column;
  margin: 10px;
  max-width: 32%;
  
  transition: all .6s;
}
.title-image:hover > h2{

  opacity:0;
}

.title-image > h2 {
  position: absolute;
  top: 0;
  
  width: 100%;
  max-width:100%;
  
  margin: 0;
  
  background-color: rgba(225,225,255, .5);
  transition: all .6s;
  
  text-align: center;
  word-wrap: break-word;
  word-break: normal;
}

Также стоит понимать что сейчас я поставил блоку ограничение max-width: 32%; если убрать то будет братся относительно ширины картинки