Помогите с HTML

gevorg14

Новичок
Автор темы
7
0
Нужно красные таблички перенести вниз


HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> дз2</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="script.js>"></script>
</head>
<body>
    <div class="BigBob">
        <div class="tovar1">tovar1
            <div class="buy1">buy1</div>
        </div>

        <div class="tovar2">tovar2 
            <div class="buy2">buy2</div>
        </div>
        
        <div class="tovar3">tovar3
            <div class="buy3">buy3</div>
        </div>
        
        <div class="tovar4">tovar4
            <div class="buy4">buy4</div>
        </div>
        
        <div class="tovar5">tovar5
            <div class="buy5">buy5</div>
        </div>
        
        <div class="tovar6">tovar6
            <div class="buy6">buy6</div>
        </div>
        
    </div>   

</body>
</html>




CSS:
.BigBob{
    background-color: antiquewhite;
    display: flex;
    align-items: flex-start;
    width: 700px;
    height: 450px;
    justify-content:space-between;
    flex-wrap: wrap;
}
.tovar1{
    background-color: rgb(226, 102, 89);
    width: 198px;
    height: 198px;
    margin: 10px;
    

}
.tovar2{
    background-color: rgb(226, 102, 89);
    width: 198px;
    height: 198px;
    margin: 10px;

}
.tovar3{
    background-color: rgb(226, 102, 89);
    width: 198px;
    height: 198px;
    margin: 10px;
    
}
.tovar4{
    background-color: rgb(226, 102, 89);
    width: 198px;
    height: 198px;
    margin: 10px;
    
}
.tovar5{
    background-color: rgb(226, 102, 89);
    width: 198px;
    height: 198px;
    margin: 10px;
    
}
.tovar6{
    background-color: rgb(226, 102, 89);
    width: 198px;
    height: 198px;
    margin: 10px;
    
}
.buy1{
    background-color: rgb(255, 0, 0);
    width: 60px;
    height: 30px;
    margin: 10px;
    align-content: flex-end;
    left: 25%;
    position:relative;
}
.buy2{
    background-color: rgb(255,0,0);
    width: 60px;
    height: 30px;
    margin: 10px;
    align-content: flex-end;
    left: 25%;
    position: relative;
}
.buy3{
    background-color: rgb(255,0,0);
    width: 60px;
    height: 30px;
    margin: 10px;
    align-content: flex-end;
    left: 25%;
    position: relative;
}
.buy4{
    background-color: rgb(255,0,0);
    width: 60px;
    height: 30px;
    margin: 10px;
    align-content: flex-end;
    left: 25%;
    position: relative;
}
.buy5{
    background-color: rgb(255,0,0);
    width: 60px;
    height: 30px;
    margin: 10px;
    align-content: flex-end;
    left: 25%;
    position: relative;
}
.buy6{
    background-color: rgb(255,0,0);
    width: 60px;
    height: 30px;
    margin: 10px;
    align-content: flex-end;
    left: 25%;
    position: relative;
}
 

Вложения

  • дз2 — Яндекс Браузер 11.09.2025 11_35_26.png
    дз2 — Яндекс Браузер 11.09.2025 11_35_26.png
    49.5 KB · Просмотры: 78

siwage

Известный
197
72
CSS:
.tovar1,
.tovar2,
.tovar3,
.tovar4,
.tovar5,
.tovar6 {
  background-color: rgb(226, 102, 89);
  width: 198px;
  height: 198px;
  margin: 10px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
}

.buy1,
.buy2,
.buy3,
.buy4,
.buy5,
.buy6 {
  background-color: rgb(255, 0, 0);
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  margin: 0 auto 0;
}
 
  • Грустно
Реакции: The Spark