0

Как сделать чтоб эти иконки встали на один уровень снизу,а не так чтобы одно выше,другое ниже (Эти иконки находятся в div class="cicons" Помогите,пожалуйста введите сюда описание изображения

@font-face {
  font-family: 'SanFrancisco';
    font-display: swap;
    src: url("../fonts/SFProText-Light.eot");
    src: local("O"), url("../fonts/SFProText-Light.woff") format("woff"), 
            url("../fonts/SFProText-Light.ttf") format("truetype"), 
            url("../fonts/SFProText-Light.svg") format("svg");
}

* {
  margin: 0;
  padding: 0;
  font-family:'SanFrancisco';
}

.navbar {
  height: 2.7em;
  display: flex;
  background-color: rgb(70, 67, 68);
  justify-content: center;
  align-items: center;
}

.nav-list {
  display: flex;
  width: fit-content;
  list-style: none;
}

.nav-list a {
  display: flex;
  align-items: center;
  column-gap: 5px;
  text-decoration: none;
  font-size: 12px;
  padding: 1.5em;
  font-weight: 100;
  color: white;
  font-family: 'SanFrancisco';
}

.navbar img {
  min-width: 15px;
  height: auto;
  width: 15px;
  height: auto;
}

.srv {
  width: 50px;
}

.cicons {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  column-gap: 5px;
  padding: 1em;
}

.cover {
  text-align: center;
  font-family: 'SanFrancisco';
}

.cover>h1 {
  font-size: 48px;
  font-weight: bold;
}

.iphone>img {
  width: 1150px;
  height: auto;
}

.cover a {
  text-decoration: none;
  font-size: 21px;
  font-weight: 600;
  font-family: 'sanFrancisco';
  color: rgb(0, 102, 204);
  line-height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iphone</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="static/styles/style.css">

</head>

<body>
   <div class="navbar">
    <img src="static/images/apple.png" alt="">
    <ul class="nav-list">
    <li><a href="#">Магазин</a></li>
    <li><a href="#">Mac</a></li>
    <li><a href="#">IPad</a></li>
    <li><a href="#">IPhone</a></li>
    <li><a href="#">Watch</a></li>
    <li><a href="#">AirPods</a></li>
    <li><a href="#">TV и Дом</a></li>
    <li><a href="#">Только в Apple</a></li>
    <li><a href="#">Аксессуары</a></li>
    <li><a href="#">Поддержка</a></li>
    </ul>
    <div class="icons">
        <i class='fa-solid fa-magnifying-glass' style='color:#ffffff'></i>
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16">
         <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/ style='color:#ffffff'>
</svg>
    </div>
   </div>

   <div class="cicons">
    <img src="static/images/iphonexsbu_dark_large (1).svg">
    <img src="static/images/iphonexsbu_dark_large (1).svg">
    <img src="static/images/iphonexsbu_dark_large (1).svg">
    <img class="srv" src="static/images/Background.png">
   </div>

   <div class="cover">
    <h3>IPhone13Pro</h3>
    <H1>Просто.Нереально.</H1>
    <p><a href="#">Подробнее ></a></p>
    <div class="iphone">
        <img src="static/images/2os8un3e1mq847l41ih3zhujtzv4z0pe.png">
        
    </div>
   </div>
   
</body>
</html>

2 ответа 2

0

Можно попробовать через grid

50px - это width иконок 10px - это расстояние между твоими иконками

.your-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, 50px);
    column-gap: 10px;
}
<div class="your-steps">
    <div class="step">
        <div class="cicons">
            <img src="static/images/iphonexsbu_dark_large (1).svg">
        </div>
    </div>
    <div class="step">
        <div class="cicons">
             <img src="static/images/iphonexsbu_dark_large (1).svg">
        </div>
    </div>
    <div class="step">
        <div class="cicons">
             <img src="static/images/iphonexsbu_dark_large (1).svg">
        </div>
    </div>
    <div class="step">
        <div class="cicons">
            <img class="srv" src="static/images/Background.png">
        </div>
    </div>
</div>

2
  • А как сделать между иконками расстояние,пробел?
    – Bebrik
    11 мар в 5:44
  • Ты можешь регулировать column-gap по пикселям, от него зависит расстояние между иконками
    – Amely
    12 мар в 1:07
0

.cicons {align-items: flex-end;} и все картинки встанут по нижнему уровню.
У вас стоит center - поэтому они центрированы

4
  • А как сделать между иконками расстояние,пробел?
    – Bebrik
    11 мар в 5:44
  • @Bebrik Очень просто - .cicons {column-gap: 15px;} - вместо 15 можно любое другое число 11 мар в 5:46
  • Пожалуйста, оборачивайте код в апострофы.
    – ΝNL993
    11 мар в 15:01
  • спасибо большое )
    – Bebrik
    11 мар в 16:18

Ваш ответ

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

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