Как сделать ряд

Question

Здраствуйте,я хочу сделать строки тоесть что-бы мои картини+текст были в строку. Тоесть что-бы 1 картинка была возле 2 картинки а не на новой строке.Там где стрелочка там должен стоять 1 картика

.knopka:hover {
  background-color: rgb(85, 100, 79);
  font-size: 20px;
}

.kartinka {
  width: 390px;
  height: 250px;
}

.Game1 {
  margin-top: 20px;
  margin-left: 15px;
  border: 3px solid;
  display: inline-block;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Страничка игр.</title>
  <link href="Стуле для сайта с играми.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <Div class="Game1">
    <img class="kartinka" src="https://www.digiseller.ru/preview/118855/p1_2369359_9784a101.jpg"><b> 
            <br> 1.Стоимость продукта=359 руб или 4$<br> 2.Жанр-Тактический шутер<br>3.Название продукта-Rainbow Six: Siege<Br> </b>

    <a href="https://plati.market/itm/tom-clancys-rainbow-six-siege-standart-wholesale-key/2369359" target="_blank">
      <button class=knopka>
       <b>Купить сейчас за 4$ или за 359 руб.</b>
       </button>
    </a>
  </Div>


  <DIV class="JOPA">
    <img class="kartinka" src="https://www.digiseller.ru/preview/118855/p1_2617160_c68e8bc7.jpg">
    <b>  <br> 1.Стоимость продукта=338руб или 4$<br> 2.Жанр-Сурваивел хоррор<br>3.Название продукта-Dying Light-Enhanced Edition РУ/СНГ Ключ Оригинал<Br>                                                                                                 </b>

    <A href="https://plati.market/itm/dying-light-enhanced-edition-key-ru-cis-wholesale/2617160" target="_blank">
      <button class="knopka">
Купить Dying Light-Enhanced Edition РУ/СНГ Ключ Оригинал!
            </button>
    </A>
  </DIV>

Answer 1

Через flex.

.knopka:hover {
  background-color: rgb(85, 100, 79);
  font-size: 20px;
}

.kartinka {
  width: 390px;
  height: 250px;
}

.Game1 {
  margin-top: 20px;
  margin-left: 15px;
  border: 3px solid;
}

.container {
  display: flex; /* <- указано для родительского элемента*/
}

<div class="container"> <!-- родительский элемент -->
  <div class="Game1">
    <img class="kartinka" src="https://www.digiseller.ru/preview/118855/p1_2369359_9784a101.jpg">
    <b> 
         <br> 1.Стоимость продукта=359 руб или 4$<br> 2.Жанр-Тактический шутер<br>3.Название продукта-Rainbow Six: Siege
         <br> 
    </b>

    <a href="https://plati.market/itm/tom-clancys-rainbow-six-siege-standart-wholesale-key/2369359" target="_blank">
      <button class=knopka>
        <b>Купить сейчас за 4$ или за 359 руб.</b>
       </button>
    </a>
  </div>



  <div class="JOPA">
    <img class="kartinka" src="https://www.digiseller.ru/preview/118855/p1_2617160_c68e8bc7.jpg">
    <b>
      <br> 1.Стоимость продукта=338руб или 4$
      <br> 2.Жанр-Сурваивел хоррор<br>3.Название продукта-Dying Light-Enhanced Edition РУ/СНГ Ключ Оригинал
      <br>                                                                                                 </b>

    <a href="https://plati.market/itm/dying-light-enhanced-edition-key-ru-cis-wholesale/2617160" target="_blank">
      <button class="knopka">
Купить Dying Light-Enhanced Edition РУ/СНГ Ключ Оригинал!
      </button>
    </a>
  </div>
</div>

Можно похожего результата добиться через display: inline-block;. Но придется задать максимальную ширину для ваших элементов.

body {
  min-width: 900px;
}

.knopka:hover {
  background-color: rgb(85, 100, 79);
  font-size: 20px;
}

.kartinka {
  height: 250px;
  width: 390px;
}

.Game1 {
  width: 390px;
  margin-top: 20px;
  margin-left: 15px;
  border: 3px solid;
  display: inline-block;
}

.JOPA{
  display: inline-block;
  width: 390px;
}

<div class="Game1">
    <img class="kartinka" src="https://www.digiseller.ru/preview/118855/p1_2369359_9784a101.jpg">
    <b> 
         <br> 1.Стоимость продукта=359 руб или 4$<br> 2.Жанр-Тактический шутер<br>3.Название продукта-Rainbow Six: Siege
         <br> 
    </b>

    <a href="https://plati.market/itm/tom-clancys-rainbow-six-siege-standart-wholesale-key/2369359" target="_blank">
      <button class=knopka>
        <b>Купить сейчас за 4$ или за 359 руб.</b>
       </button>
    </a>
  </div>



  <div class="JOPA">
    <img class="kartinka" src="https://www.digiseller.ru/preview/118855/p1_2617160_c68e8bc7.jpg">
    <b>
      <br> 1.Стоимость продукта=338руб или 4$
      <br> 2.Жанр-Сурваивел хоррор<br>3.Название продукта-Dying Light-Enhanced Edition РУ/СНГ Ключ Оригинал
      <br>                                                                                                 </b>

    <a href="https://plati.market/itm/dying-light-enhanced-edition-key-ru-cis-wholesale/2617160" target="_blank">
      <button class="knopka">
Купить Dying Light-Enhanced Edition РУ/СНГ Ключ Оригинал!
      </button>
    </a>
  </div>

Answer 2

Используйте flex. Наименование классов не рекомендуется писать транслитом.

.item-set {
  display: flex;
}
.item {
  flex-basis: 300px;
  flex-shrink: 0;
  border: 1px solid black;
  margin-right: 5px;
  border-radius: 3px;
}

<div class="item-set">
  <article class="item">
    <img src="https://via.placeholder.com/300" />
    <h2>Title</h2>
    <p>Paragraph</p>
  </article>
  <article class="item">
    <img src="https://via.placeholder.com/300" />
    <h2>Title</h2>
    <p>Paragraph</p>
  </article>
</div>

БЛОГ НА HUSL

Как сделать ряд

Ответы (2 шт):