В настоящее время я работаю над веб-сайтом форума и не могу понять, как размещать элементы, на которые не будет влиять содержимое других элементов.
Например, если я изменю текст содержимого элемента, другие элементы, расположенные рядом с ним, изменят положение.
Пример:
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>
Извините за этот длинный код, я просто хочу сделать это как можно более явным, чтобы его было легче решить.
Вы можете использовать свойство 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 будут меняться одновременно.
Это не когда я стилизую его, а когда я меняю текст.
Это никоим образом не отвечает на вопрос ОП и должно быть комментарием. Как написать хороший ответ?
На самом деле это не отвечает на весь вопрос, но, безусловно, помогает, и это важное примечание, поэтому я не комментировал его, поскольку комментарии обычно невидимы.
Это не дает ответа на вопрос. Как только у вас будет достаточно репутация, вы сможете комментировать любой пост; вместо этого давать ответы, не требующие пояснений от спрашивающего. - Из обзора
Ваш первый пример делает это, потому что правило .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
.
Не используйте float для текста, выравнивайте элементы с помощью flexbox. Используйте float только в том случае, если вам нужно, чтобы текст плавал вокруг изображения.