Как изменить положение элементов в вёрстке?

Ссылка скопирована
CSS HTML PHP
1 ответ 
<div class="center-box">           <div class="character-line">             <img src="images/DK.png" alt="Character 1">             <img src="images/Druid.png" alt="Character 1">             <img src="images/Hunter.png" alt="Character 1">             <img src="images/Mage.png" alt="Character 1">             <img src="images/Paladin.png" alt="Character 1">             <img src="images/Priest.png" alt="Character 1">             <img src="images/Rogue.png" alt="Character 1">             <img src="images/Shaman.png" alt="Character 1">             <img src="images/Warlock.png" alt="Character 1">             <img src="images/Warrior.png" alt="Character 1">           </div>           <div class="checkbox-line">             <div class="checkbox">               <input type="checkbox" id="checkbox-all">               <label for="checkbox-all"></label>             </div>             <div class="checkbox">               <input type="checkbox" id="checkbox-accepted">               <label for="checkbox-accepted"></label>             </div>             <div class="checkbox">               <input type="checkbox" id="checkbox-declined">               <label for="checkbox-declined"></label>             </div>             <div class="checkbox">               <input type="checkbox" id="checkbox-hold">               <label for="checkbox-hold"></label>              </div>           </div>         </div>

<div class="center-box"> <div class="character-line"> <img src="images/DK.png" alt="Character 1"> <img src="images/Druid.png" alt="Character 1"> <img src="images/Hunter.png" alt="Character 1"> <img src="images/Mage.png" alt="Character 1"> <img src="images/Paladin.png" alt="Character 1"> <img src="images/Priest.png" alt="Character 1"> <img src="images/Rogue.png" alt="Character 1"> <img src="images/Shaman.png" alt="Character 1"> <img src="images/Warlock.png" alt="Character 1"> <img src="images/Warrior.png" alt="Character 1"> </div> <div class="checkbox-line"> <div class="checkbox"> <input type="checkbox" id="checkbox-all"> <label for="checkbox-all"></label> </div> <div class="checkbox"> <input type="checkbox" id="checkbox-accepted"> <label for="checkbox-accepted"></label> </div> <div class="checkbox"> <input type="checkbox" id="checkbox-declined"> <label for="checkbox-declined"></label> </div> <div class="checkbox"> <input type="checkbox" id="checkbox-hold"> <label for="checkbox-hold"></label> </div> </div> </div>

.center-box {   flex: 2; }  .character-line {   display: flex;   justify-content: space-around;   align-items: center;   height: 50px;   width: 76%;   padding-left: 12px;   padding-top: 10px; }  .character-line img {   width: 66px;   height: auto;   border-radius: 50%; }  /* галочки */  .checkbox-line {   display: flex;   align-items: center;   gap: 5px;   flex-direction: row-reverse;   padding-left: 12px;   padding-top: -10px; }  .checkbox {   display: flex;   align-items: center;   justify-content: center;   width: 13px;   height: 13px;   border-radius: 5px;   border: #424769; }  .checkbox input[type="checkbox"] {   display: none; }  .checkbox label {   display: block;   width: 100%;   height: 100%;   cursor: pointer;   background-color: transparent;   border: 3px solid #424769;   border-radius: 5px; }  .checkbox label:after {   content: "";   display: block;   width: 7px;   height: 7px;   margin: 3px;   border-radius: 50%;   background-color: #424769;   opacity: 0; }  .checkbox input[type="checkbox"]:checked + label:after {   opacity: 1; }

.center-box { flex: 2; } .character-line { display: flex; justify-content: space-around; align-items: center; height: 50px; width: 76%; padding-left: 12px; padding-top: 10px; } .character-line img { width: 66px; height: auto; border-radius: 50%; } /* галочки */ .checkbox-line { display: flex; align-items: center; gap: 5px; flex-direction: row-reverse; padding-left: 12px; padding-top: -10px; } .checkbox { display: flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 5px; border: #424769; } .checkbox input[type="checkbox"] { display: none; } .checkbox label { display: block; width: 100%; height: 100%; cursor: pointer; background-color: transparent; border: 3px solid #424769; border-radius: 5px; } .checkbox label:after { content: ""; display: block; width: 7px; height: 7px; margin: 3px; border-radius: 50%; background-color: #424769; opacity: 0; } .checkbox input[type="checkbox"]:checked + label:after { opacity: 1; }

У меня есть данный код разметки и стилей. Хотел бы поинтересоваться, как можно сделать так, чтобы галочки были справа от линии с изображениями. Сейчас они выглядят так:

Как изменить положение элементов в вёрстке?

Дополнительно:

Задайте так:

.center-box {   display: flex;   gap: 15px } .character-line {   flex-shrink: 0;   width: 76%; } .checkbox-line {   flex-grow: 1 }

.center-box { display: flex; gap: 15px } .character-line { flex-shrink: 0; width: 76%; } .checkbox-line { flex-grow: 1 }

Тут будет линия с картинками определенной ширины, а с галочками заполнять все оставшееся место.

И кстати, отрицательного внутреннего отступа (padding) у .checkbox-line недопустимо.

  • Благодарю.

  • Как изменить положение элементов в вёрстке?

    Да, галочки теперь справа, но они всё ещё ниже картинок. И теперь сверху и снизу от них огромный отступ.

  • Всё, решил созданием отдельного элемента, Благодарю за помощь.
  • yann1nnn, ну тут можно добавить .checkbox-line { align-self: flex-start; } или .center-box { align-items: flex-start; }

Ответы:

Нужно их вырезать в HTML из .center-box и вставить в элемент, который и является правой колонкой.
Или вы хотите без изменения HTML этого добиться? Это так себе идея.

  • Благодарю, но я не то имел ввиду. Я хочу чтобы они остались в центральном блоке, но были не снизу линии с изображениями, а справа от неё.
  • Нарисуйте желаемый результат, потому что "справа" можно трактовать по-разному.

  • Как изменить положение элементов в вёрстке?

    Вот так.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Стас DB Ответ

Для изменения положения элементов в вёрстке можно использовать различные методы и свойства CSS. Вот несколько способов, как это можно сделать:

1. Использование свойства float: можно использовать свойство float для выравнивания элементов по левому или правому краю контейнера. Например, если вы хотите выровнять элементы по левому краю, вы можете добавить следующий CSS код:

.element {
   float: left;
}

.element { float: left; }

2. Использование свойства position: можно использовать свойство position для точного позиционирования элементов на странице. Например, если вы хотите разместить элемент в правом верхнем углу страницы, вы можете использовать следующий CSS код:

.element {
   position: absolute;
   top: 0;
   right: 0;
}

.element { position: absolute; top: 0; right: 0; }

3. Использование свойства display: можно изменить тип отображения элемента, что также может повлиять на его положение на странице. Например, если вы хотите выровнять элементы в ряд, вы можете использовать свойство display: inline-block:

.element {
   display: inline-block;
}

.element { display: inline-block; }

4. Использование свойства flexbox: flexbox - это мощный инструмент для создания гибких макетов. С его помощью можно легко управлять распределением элементов в контейнере. Например, чтобы выровнять элементы по горизонтали, вы можете использовать следующий CSS код:

.container {
   display: flex;
   justify-content: space-between;
}

.container { display: flex; justify-content: space-between; }

Это лишь несколько способов, как можно изменить положение элементов в вёрстке с помощью CSS. В зависимости от конкретного дизайна и требований к макету, можно выбрать наиболее подходящий способ для вашего случая.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ linkedin Из-за чего выкидывает из аккаунта LinkedIn? 1 ответ