0

Здраствуйте,я хочу сделать строки тоесть что-бы мои картини+текст были в строку. Тоесть что-бы 1 картинка 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>

1
  • советую пройти этот курс на youtube, там адаптивная верстка, всё по полочкам рассказывают и показывают youtu.be/ltMSrSis9ww 9 мая 2020 в 10:52

2 ответа 2

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>

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>

14
  • не надо делать .container флексом, он не для этого 9 мая 2020 в 10:56
  • @Михаил Камахин, почему? 9 мая 2020 в 10:58
  • @МихаилКамахин у контейнера нету семантический ценности - это просто блок то есть блок ограничитель обозвать можно как угодно 9 мая 2020 в 10:59
  • @ДенисСтепанов .container для выравнивания контента по центру, либо блоку можно написать .container .fluid и сразу понятно, что это блок на 100% ширины. Это такой стандарт, чтобы не было верстки, в которой фиг разобраться. Это пошло из Bootstrap getbootstrap.com/docs/4.4/layout/overview . Логично было бы сделать в .container блок .flex__wrapper и ему сказать display: flex 9 мая 2020 в 11:00
  • 1
    Я понял, что людей, уважающих бутстрап такие названия классов вводят в заблуждение. А людей, использующих БЭМ, наверное, вводит в заблуждение flex__wrapper и они думают почему не flex-wrapper или не wrapper_type_flex. По мне как спорить о ЯП, какой лучше. 9 мая 2020 в 11:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.