Блог

Главная - Вопросы по программированию - Я пытаюсь получить img и текст рядом в сетке. Я не работаю

Я пытаюсь получить img и текст рядом в сетке. Я не работаю

#image #text #grid

Вопрос:

Я пытаюсь использовать структуру HTML, как показано ниже. По сути section , это тег с двумя div ячейками внутри.

Вот мой HTML:

     <section class="container">
      <div class="cell">
        <img class="pt-img" src="sketch.jpeg" style="width:100%">
        <div class="text pt">
          <h4>DON'T FORGET TO SKETCH YOR PRODJECT</h4>
          <p class=description-pt>
            <strong>when an unknown printer took a galley of 
              type and scrambled it to make a type specimen book.
              Lorem Ipsum is simply dummy text of the printing an</strong>
          </p>
        </div>
      </div>

      <div class="cell">
        <img src="kreativ.jpeg" style="width:100%">
        <h4>SNIK A PIK-- NEW GAME</h4>
        <strong>when an unknown printer took a galley of 
        type and scrambled it to make a type specimen book.
        Lorem Ipsum is simply dummy text of the printing an</strong>
      </div>
    </section>

И я пытаюсь использовать следующий CSS:

 .container
{
  padding:2rem;
  justify-content: center;
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: repeat(auto-fill,minmax(18rem,4fr));
  margin-top: 4rem;
 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.cell {
  
  display: flex;
  flex-wrap: wrap;
  
  flex-direction:row;

}

.container img
{
margin-top: 5px;
vertical-align: middle;
flex:100%;
border-radius: 10px;
height: 205px;
}

Текст отображается под изображениями, а не рядом с ними

Метки: