Выровняйте гибкий элемент по горизонтали с другим внешним контейнером <span>

Я занимаюсь дизайном веб-сайта. Внутри «симулятора сообщений электронной почты», где каждое сообщение представляет собой новое электронное письмо с именем и заголовком. Я должен выровнять заголовок так, чтобы он соответствовал началу строки других.

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

Элементы вокруг него не имеют полей, на которые он влияет.

Внешний вид, который я ищу

Моя сеть

<div class="alerts-messaging-container-person">
        <input type="checkbox" class="check-all">
        <span class="not-selected"></span>
        <span class="contact-name">Richard Channing</span>
        <span class="email-name">Memorial Clinic</span>
        <span class="date">12 April 2014</span>
        <button><img src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png" /></button>
    </div>

    <div class="alerts-messaging-container-person">
        <input type="checkbox" class="check-all">
        <span class="not-selected"></span>
        <span class="contact-name">Elisabeth Bale</span>
        <span class="email-name">From Connecticut</span>
        <span class="date">21 June 2013</span>
        <button><img src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png" /</button>
    </div>

    <div class="alerts-messaging-container-person">
        <input type="checkbox" class="check-all">
        <span class="not-selected"></span>
        <span class="contact-name">Sarah Connor</span>
        <span class="email-name">Cyberdyne Systems</span>
        <span class="date">20 June 2013</span>
        <button><img src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png" /</button>
    </div>


.alerts-messaging-container-person {
width: 1000px;
margin: auto;
display: flex;
align-content: flex-end;
gap: 30px;
border: 1px solid rgb(204, 203, 203);


.alerts-messaging-container-person span {
    align-self: center;
    font-size: 1.2em;

}

Вы можете опубликовать свой рабочий код или ссылку на свою страницу.

The Duo 17.05.2022 09:57
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
1
43
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Поместите первых трех детей <div> в новый <div>.

<div>
    <input type="checkbox" class="check-all">
    <span class="not-selected"></span>
    <span class="contact-name">Richard Channing</span>
</div>

Теперь, когда все дочерние элементы выровнены по левому краю, но мы хотим, чтобы между ними был промежуток, не нарушая выравнивание всех остальных <div>, мы используем flex-basis.

.alerts-messaging-container-person * {
  flex-basis: 25%;
}

* после упоминания класса выбирает всех дочерних элементов родителя с этим классом.

Вот ссылка на кодовая ручка

Ответ принят как подходящий

Вы можете использовать контейнер display: grid;, который установит для этих столбцов фиксированную ширину, чтобы они были последовательно выровнены по строкам.

Шаблон сетки, используемый в этой демонстрации: auto auto 35% 35% 10em auto;

.alerts-messaging-container-person {
  width: 100%;
  margin: auto;
  display: grid;
  border: 1px solid rgb(204, 203, 203);
  grid-template-columns: auto auto 35% 35% 10em auto;
}


.alerts-messaging-container-person span {
  align-self: center;
  font-size: 1.2em;
}

img{
  width: 30px;
}
<div class="alerts-messaging-container-person">
  <input type="checkbox" class="check-all">
  <span class="not-selected"></span>
  <span class="contact-name">Elisabeth Bale</span>
  <span class="email-name">From Connecticut</span>
  <span class="date">21 June 2013</span>
  <button>
    <img
      src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png"/>
  </button>
</div>

<div class="alerts-messaging-container-person">
  <input type="checkbox" class="check-all">
  <span class="not-selected"></span>
  <span class="contact-name">Sarah Connor</span>
  <span class="email-name">Cyberdyne Systems</span>
  <span class="date">20 June 2013</span>
  <button>
    <img
      src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png" />
  </button>
</div>

Другие вопросы по теме