Как перевести

Всем привет
Как перевести строку как на картинке какой код прописать html <div class="box"><img class="img" src="3.jpg" alt=""><b>Квадратная вафельница DOMOTEC MS-7705</div><div class="box"><img class="img" src="4.jpg" alt=""><b>Квадратная вафельница DOMOTEC MS-7705</div>
Див css
.box {
background-color: #b3aa99;
padding: 20px;
margin: 10px;
width: 150px;
height: 200px;
}

Изображение

------

89761_IMG_20251227_121802.jpg (251.7 Kb)
Скачиваний: 55

________
посл. ред. 27.12.2025 в 13:44; всего 3 раз(а); by Andr11

Andr11 (27 дек 2025, в 13:19)
Всем привет
Как перевести строку как на картинке какой код прописать html <div class="box"><img class="img" src="3.jpg" alt=""><b>Квадратная вафельница DOMOTEC MS-7705</div><div class="box"><img class="img" src="4.jpg" alt=""><b>Квадратная вафельница DOMOTEC MS-7705</div>
Див css
.box {
background-color: #b3aa99;
padding: 20px;
margin: 10px;
width: 150px;
height: 200px;
}

Ты хочешь сделать такой же блок как на фото ?

Andr11 (27 дек 2025, в 13:19)
Всем привет
Как перевести строку как на картинке какой код прописать html <div class="box"><img class="img" src="3.jpg" alt=""><b>Квадратная вафельница DOMOTEC MS-7705</div><div class="box"><img class="img" src="4.jpg" alt=""><b>Квадратная вафельница DOMOTEC MS-7705</div>
Див css
.box {
background-color: #b3aa99;
padding: 20px;
margin: 10px;
width: 150px;
height: 200px;
}

Вот код если тебе так надо то такой код

html

   <!DOCTYPE html> 
 <html lang="ru"> 
 <head> 
   <meta charset="UTF-8"> 
  
   <!-- ВАЖНО: исправляет масштаб на телефоне --> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  
   <title>Кухонные товары</title> 
  
   <style> 
     * { 
       box-sizing: border-box; 
     } 
  
     body { 
       margin: 0; 
       font-family: Arial, sans-serif; 
       background: #d8cfc2; 
     } 
  
     /* Заголовок */ 
     .title { 
       text-align: center; 
       color: red; 
       margin: 15px 0; 
       font-size: 22px; 
     } 
  
     /* Верхний блок */ 
     .info-block { 
       width: 90%; 
       margin: 0 auto 25px; 
       border-radius: 12px; 
       overflow: hidden; 
     } 
  
     .info-title { 
       background: #6a3d1c; 
       color: #8a7dff; 
       padding: 12px; 
       font-weight: bold; 
       font-size: 14px; 
     } 
  
     .info-text { 
       background: #2f6c82; 
       color: #c0c0c0; 
       padding: 15px; 
       font-size: 13px; 
     } 
  
     /* Контейнер товаров */ 
     .products { 
       display: flex; 
       gap: 20px; 
       padding: 0 15px; 
     } 
  
     /* Карточка товара */ 
     .product-card { 
       background: #bfb6a7; 
       padding: 12px; 
       border-radius: 16px; 
       width: 170px; 
       height: 260px; 
  
       display: flex; 
       flex-direction: column; 
     } 
  
     /* Заглушка */ 
     .image-placeholder { 
       width: 100%; 
       height: 140px; 
       background: #9a9a9a; 
       border-radius: 12px; 
  
       display: flex; 
       align-items: center; 
       justify-content: center; 
  
       color: #fff; 
       font-size: 16px; 
       margin-bottom: 10px; 
     } 
  
     /* Название */ 
     .product-title { 
       font-weight: bold; 
       font-size: 14px; 
       margin-top: auto; /* ВЫРАВНИВАЕТ ТЕКСТ */ 
     } 
  
     /* Адаптация */ 
     @media (max-width: 600px) { 
       .products { 
         justify-content: center; 
       } 
     } 
   </style> 
 </head> 
  
 <body> 
  
   <h1 class="title">Кухонные товары</h1> 
  
   <div class="info-block"> 
     <div class="info-title">НАЗВАНИЕ БЛОКА</div> 
     <div class="info-text">ТУТ СКОРО ЧТО-ТО ПОЯВИТСЯ</div> 
   </div> 
  
   <div class="products"> 
     <div class="product-card"> 
       <div class="image-placeholder">Фото</div> 
       <div class="product-title"> 
         Квадратная вафельница<br> 
         DOMOTEC MS-7705 
       </div> 
     </div> 
  
     <div class="product-card"> 
       <div class="image-placeholder">Фото</div> 
       <div class="product-title"> 
         Квадратная вафельница<br> 
         DOMOTEC MS-7705 
       </div> 
     </div> 
   </div> 
  
 </body> 
 </html>

Вот пример временный http://zip0.ru/Test.html

Andr11 (27 дек 2025, в 13:19)
Всем привет
Как перевести строку как на картинке какой код прописать html <div class="box"><img class="img" src="3.jpg" alt=""><b>Квадратная вафельница DOMOTEC MS-7705</div><div class="box"><img class="img" src="4.jpg" alt=""><b>Квадратная вафельница DOMOTEC MS-7705</div>
Див css
.box {
background-color: #b3aa99;
padding: 20px;
margin: 10px;
width: 150px;
height: 200px;
}

Див css

.box {background-color: #b3aa99;padding: 20px;margin: 10px;width: 150px;height: 200px;display:inline-block;}