Сделать определенный элемент div немного ниже
Мне нужно, чтобы два элемента div в моем коде немного опустились, оба
<div class = "username-and-timestamp">
<div class = "username">RandomDude</div>
<div class = "timestamp">17 minutes ago.</div>
</div>
Я пытался использовать стиль полей для имени пользователя и отметки времени, а также для высоты строки, но оба не сработали!
вот мой CSS:
Вот мой полный код:
(ССС)
:root {
--primary: #161720;
--primary-lightened: #2A2B35;
}
html {
background-color: var(--primary)
}
.post {
width: 400px;
border-radius: 2%;
background-color: var(--primary-lightened);
position: relative;
}
.third-line {
position: absolute;
top: 12%;
width: 400px;
height: 2.5px;
background-color: var(--primary);
/* Change this to the color you want */
}
.username {
font-size: 18px;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
}
.timestamp {
font-size: 15px;
color: gray;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.info {
padding-left: 65px;
}
.profile-picture {
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
top: 5px;
left: 10px;
}
.badge {
position: absolute;
bottom: -5px;
right: -5px;
width: 20px;
height: auto;
}
.post-text {
font-size: 17px;
color: white;
font-family: "Mukta", sans-serif;
padding: 20px;
/* Add this line */
display: block;
/* Add this line */
}
.post-actions {
display: flex;
justify-content: space-around;
/* This will space the icons evenly */
color: white;
/* This will make the icons white */
padding-bottom: 20px;
/* Add this line */
}
.post-actions i:hover {
color: pink;
/* This will make the icons pink on hover */
}
.number {
font-size: 16.5px;
font-family:Arial, Helvetica, sans-serif;
font-weight: normal;
}
Я попробовал высоту строки и свойство поля, не помогло. Я пробовал свойство поля:
.username-and-timestamp {
margin-bottom: (...)px;
}
Никакое количество пикселей не получилось. (даже отрицательные значения).
.username-and-timestamp {
line-height: (...)px;
}
То же самое и здесь. Любое количество пикселей не сработало. (даже отрицательные значения).
Мой HTML:
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type = "text/css" href = "{{ url_for('static',filename='styles/main/main.css') }}">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src = "{{ url_for('static',filename='/scripts/main/main.js') }}"></script>
<title>User</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel = "preconnect" href = "https://fonts.googleapis.com">
<link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
<link href = "https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&display=swap"
rel = "stylesheet">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<body>
<div class = "post">
<div class = "info">
<div class = "avatar-container">
<img src = "https://www.w3schools.com/howto/img_avatar.png" alt = "Profile Picture"
class = "profile-picture">
<img class = "badge"
src = "https://cdn.discordapp.com/attachments/1191384595938164766/1224995524910907392/mod_badge.png?ex=661f84fc&is=660d0ffc&hm=e810c73ddf07d60a369ed7814135bdb7a59bb4be3edc32c6fd8891705967a0bb&"
alt = "Badge" title = "This post was made by an admin.">
</div>
<div class = "username-and-timestamp">
<div class = "username">RandomDude</div>
<div class = "timestamp">17 minutes ago.</div>
</div>
</div>
<div class = "third-line"></div>
<div class = "post-content">
<!-- Sample Content -->
<span class = "post-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.</span>
</div>
<div class = "post-actions">
<i class = "fa fa-thumbs-up"><span class = "number"> 7221</span></i>
<i class = "fa fa-share"><span class = "number"> 106</span></i>
</div>
</body>
</body>
</html>```
Changing any of those values moves the entire post down
я думаю, вы хотите использовать поле-верх вместо поля-дно
Привет, химансу, это перемещает весь мой пост вверх/вниз! Я хочу переместить текст только вниз
эй, Поли, я добавил еще несколько разъяснений.
почему бы не попробовать добавить margin-bottom/top в класс .username и класс .timestamp отдельно? Например. .username { margin-top: 5px; }
Привет @TanishqS, имя пользователя перемещается, но временная метка просто отказывается перемещаться, я пробовал все, но имя пользователя просто не перемещается (я тоже пробовал решение, о котором вы упомянули).
почему бы не попробовать добавить margin-top: 5px !important;
Также добавьте изображение инструментов разработчика, получающих CSS элемента, который вы пытаетесь переместить, чтобы лучше понять вашу проблему.
В сообщении класса div указано: «Этот элемент вызывает переполнение элемента». это CSS: ``` .username {margin-top: 15px !important; } .username { размер шрифта: 18 пикселей; белый цвет; семейство шрифтов: «Segoe UI», Tahoma, Женева, Вердана, без засечек; начертание шрифта: жирный; } :root { --primary: #161720; --primary-lightened: #2A2B35; }```
Ответы 2
transform : translateY() вариант?
@coolguy: пожалуйста :) но имейте в виду, что это преобразование также обрабатывает вращение и масштабирование. в том же свойстве, которое, таким образом, переопределяет существующие значения - поэтому попробуйте использовать здесь переменные;) > Transform: var(--allDifferentTransformations)
На мой взгляд, есть два пути решения этой проблемы.
- Вы можете использовать
.username-and-timestamp { padding-top:(..)px; }после элемента временной метки, чтобы переместить контейнер немного ниже. - Вы можете использовать
.username, .timestamp { padding-top:5px; }, чтобы присвоить обоим элементам (имя пользователя и метку времени) отступ 5pχ, например, таким образом заставив их оба немного опуститься, но также создав расстояние в 5 пикселей между ними. Надеюсь, я помог!
Лучше сначала попробовать маржин-топ. Поскольку заполнение не перемещает сам элемент, а создает свободное пространство внутри этого контейнера между границей контейнера и его содержимым (например, дочерним контейнером). Использование заполнения может привести к непреднамеренному представлению контейнера (рамка, фон и т. д.).
Пожалуйста, уточните вашу конкретную проблему или добавьте дополнительную информацию, чтобы выделить именно то, что вам нужно. Поскольку сейчас написано, трудно точно сказать, о чем вы спрашиваете.