Остановить влияние на позицию элемента содержимого других элементов

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

Например, если я изменю текст содержимого элемента, другие элементы, расположенные рядом с ним, изменят положение.

Пример:

Остановить влияние на позицию элемента содержимого других элементовОстановить влияние на позицию элемента содержимого других элементов

HTML и CSS из первого изображения:

.staff-show {
  float: right;
  margin-right: 10em;
  margin-top: 10em;
}

.staff-show .title-staff {
  font-family: Poppins-SemiBold, FontAwesome;
  display: flex;
  align-items: center;
  justify-content: center;
}

.staff-show .title-staff i {
  margin-right: 1em;
}

.staff-show .title-staff h2 {
  right: 5%;
}

.staff-show .staff-list h3,
p {
  margin: 0.1em;
  padding: 0.1em;
}

.staff-show .staff-list .icon-border {
  border: 2px solid #212e38;
  border-radius: 10px;
  width: 4em;
  height: 4em;
  display: inline-block;
}

.staff-show .staff-list i {
  padding: 1.3em 0.9em;
  text-align: center;
}

.staff-show .staff-list ul li {
  margin: 1.2em;
}

.staff-show .staff-list .staff-info {
  float: right;
  margin-left: 1.5em;
}
<div class = "staff-show">
  <div class = "staff-list">
    <ul>
      <li>
        <div class = "icon-border"><i class = "fa-solid fa-user fa-xl"></i></div>
        <div class = "staff-info">
          <h3>Johnny Games</h3>
          <p>System Admin</p>
        </div>
      </li>
      <li>
        <div class = "icon-border"><i class = "fa-solid fa-user fa-xl"></i></div>
        <div class = "staff-info">
          <h3>John Lenon</h3>
          <p>Service Founder</p>
        </div>
      </li>
    </ul>
  </div>
</div>

Второе изображение HTML и CSS:

.forum-list button {
  border: 2px solid #212e38;
  border-radius: 20px;
  padding: 10px 40px;
  width: 77em;
  height: 8.5em;
  font-family: Poppins-SemiBold, FontAwesome;
  color: white;
  margin-right: 1em;
  margin-bottom: 1.5em;
  display: grid;
}

.forum-list-border {
  border: 2px solid #172129;
  border-radius: 20px;
  width: 5.7em;
  height: 5.7em;
  margin-top: 0.3em;
}

.forum-list i {
  margin-top: 1.5em;
  width: 100%;
}

.forum-list-header {
  display: flex;
  align-items: center;
}

.forum-list h2 {
  margin-left: 2em;
}

.forum-list .forum-list.btn {
  margin-bottom: 2em;
}

.forum-list-info {
  grid-column-start: 2;
  grid-column-end: 3;
}

.forum-list-info-numbers {
  display: flex;
  align-items: center;
}

.forum-list-info-text {
  display: flex;
  align-items: center;
}

.forum-list-info-numbers h3 {
  margin-right: 6.3em;
}

.forum-list-info-text p {
  margin-right: 5em;
}
<div class = "forum-container">
  <div class = "forum-list-container">
    <div class = "forum-list">
      <button class = "forum-list-btn">
          <div class = "forum-list-header">
              <div class = "forum-list-border"><i class = "fa-solid fa-laptop-code fa-2xl"></i></div>
              <h2>Tech, Informatique et autres</h2>
          </div>
          <div class = "forum-list-info">
              <div class = "forum-list-info-numbers"><h3>5.1k</h3><h3>50.3k</h3></div>
              <div class = "forum-list-info-text"><p>Posts</p><p>Messages</p></div>
          </div>
      </button>
    </div>
  </div>
</div>

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

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

cloned 05.05.2022 14:31
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
1
46
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете использовать свойство display: flex для достижения обоих результатов. Я добавил еще одну обертку div для первого изображения и добавил новую class на button для второго.

.staff-show {
  float: right;
  margin-right: 10em;
  margin-top: 10em;
}

.staff-show .title-staff {
  font-family: Poppins-SemiBold, FontAwesome;
  display: flex;
  align-items: center;
  justify-content: center;
}

.staff-show .title-staff i {
  margin-right: 1em;
}

.staff-show .title-staff h2 {
  right: 5%;
}

.staff-show .staff-list h3,
p {
  margin: 0.1em;
  padding: 0.1em;
}

.staff-show .staff-list .icon-border {
  border: 2px solid #212e38;
  border-radius: 10px;
  width: 4em;
  height: 4em;
  display: inline-block;
}

.staff-show .staff-list i {
  padding: 1.3em 0.9em;
  text-align: center;
}

.staff-show .staff-list ul li {
  margin: 1.2em;
}

.staff-show .staff-list .staff-info {
  float: right;
  margin-left: 1.5em;
}

.another-div {
  display: flex;
}
<div class = "staff-show">
  <div class = "staff-list">
    <ul>
      <li>
        <div class='another-div'>
          <div class = "icon-border"><i class = "fa-solid fa-user fa-xl"></i></div>
          <div class = "staff-info">
            <h3>Johnny Games</h3>
            <p>System Admin</p>
          </div>
        </div>
      </li>
      <li>
        <div class='another-div'>
          <div class = "icon-border"><i class = "fa-solid fa-user fa-xl"></i></div>
          <div class = "staff-info">
            <h3>John Lenon</h3>
            <p>Service Founder</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

.forum-list button {
  border: 2px solid #212e38;
  border-radius: 20px;
  padding: 10px 40px;
  width: 77em;
  height: 8.5em;
  font-family: Poppins-SemiBold, FontAwesome;
  color: white;
  margin-right: 1em;
  margin-bottom: 1.5em;
  display: grid;
}

.forum-list-border {
  border: 2px solid #172129;
  border-radius: 20px;
  width: 5.7em;
  height: 5.7em;
  margin-top: 0.3em;
}

.forum-list i {
  margin-top: 1.5em;
  width: 100%;
}

.forum-list-header {
  display: flex;
  align-items: center;
}

.forum-list h2 {
  margin-left: 2em;
}

.forum-list .forum-list.btn {
  margin-bottom: 2em;
}

.forum-list-info {
  grid-column-start: 2;
  grid-column-end: 3;
}

.forum-list-info-numbers {
  display: flex;
  align-items: center;
}

.forum-list-info-text {
  display: flex;
  align-items: center;
}

.forum-list-info-numbers h3 {
  margin-right: 6.3em;
}

.forum-list-info-text p {
  margin-right: 5em;
}

.d-flex-between {
  display: flex !important;
  justify-content: space-between;
}
<div class = "forum-container">
  <div class = "forum-list-container">
    <div class = "forum-list">
      <button class = "forum-list-btn d-flex-between">
        <div class = "forum-list-header">
          <div class = "forum-list-border"><i class = "fa-solid fa-laptop-code fa-2xl"></i></div>
          <h2>Tech, Informatique et autres</h2>
        </div>
        <div class = "forum-list-info">
          <div class = "forum-list-info-numbers">
            <h3>5.1k</h3>
            <h3>50.3k</h3>
          </div>
          <div class = "forum-list-info-text">
            <p>Posts</p>
            <p>Messages</p>
          </div>
        </div>
      </button>

      <button class = "forum-list-btn d-flex-between">
        <div class = "forum-list-header">
          <div class = "forum-list-border"><i class = "fa-solid fa-laptop-code fa-2xl"></i></div>
          <h2>Account Boost</h2>
        </div>
        <div class = "forum-list-info">
          <div class = "forum-list-info-numbers">
            <h3>5.1k</h3>
            <h3>50.3k</h3>
          </div>
          <div class = "forum-list-info-text">
            <p>Posts</p>
            <p>Messages</p>
          </div>
        </div>
      </button>
    </div>
  </div>
</div>

Вам нужно различать имена классов, например, на первом изображении оба класса названы как staff-info, что означает, что если вы стилизуете класс staff-info, оба div будут меняться одновременно.

Это не когда я стилизую его, а когда я меняю текст.

Sdev 05.05.2022 14:20

Это никоим образом не отвечает на вопрос ОП и должно быть комментарием. Как написать хороший ответ?

Haseeb Hassy 05.05.2022 14:26

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

bachar97 05.05.2022 16:27

Это не дает ответа на вопрос. Как только у вас будет достаточно репутация, вы сможете комментировать любой пост; вместо этого давать ответы, не требующие пояснений от спрашивающего. - Из обзора

Mr Robot 06.05.2022 09:22
Ответ принят как подходящий

Ваш первый пример делает это, потому что правило .staff-show .staff-list .staff-info установлено на float: right. Таким образом, когда содержимое в div.staff-info становится меньше, правая сторона div останется на одном уровне с правой стороной его контейнера.

Предполагая, что у вас не будет достаточно контента, чтобы заставить его обернуться, вы можете просто сделать следующее, чтобы он был выровнен по левому краю с рамкой:

.staff-show .staff-list .staff-info {
    display: inline-block;
    vertical-align: top;
    margin-left: 1.5em;
}

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

Во втором примере просто добавьте justify-content: space-between к правилу .forum-list button.

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