Обучение/Помощь новичкам | Как перевести
KseniyaKlimova
Всем привет
Как перевести строку как на картинке какой код прописать 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)
Скачиваний: 12
________
посл. ред. 27.12.2025 в 13:44; всего 3 раз(а); by Andr11
Как перевести строку как на картинке какой код прописать 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) Скачиваний: 12
________
посл. ред. 27.12.2025 в 13:44; всего 3 раз(а); by Andr11
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;
}
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> 
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;
}
.box {background-color: #b3aa99;padding: 20px;margin: 10px;width: 150px;height: 200px;display:inline-block;}