#html #css
Вопрос:
Я сделал изогнутый div, который содержит мое имя, идентификатор и фотографию:
.version2 {
background-color: lightblue;
display: flex;
justify-content: space-evenly;
}
.version2 div {
padding: 5px 0 5px 0;
align-self: center;
}
#propic{
border-radius: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyHeader</title>
<link rel="stylesheet" href="styles/stylesheet.css">
</head>
<body>
<div class="version2">
<div><strong>Name:</strong> Tahmin Ahmed </div>
<div><strong>ID:</strong> 123456</div>
<picture>
<img id="propic" src="https://i.stack.imgur.com/av1Fi.png" alt="My Profile picture">
</picture>
</div>
</body>
</html>
Я хочу, чтобы синий фон был лишь немного больше текста, а изображение выходило за пределы синего фона вниз. Что мне нужно добавить/удалить, чтобы достичь этого?
Вот как я хочу, чтобы это выглядело
Комментарии:
1. Можете ли вы создать желаемый результат с помощью чего-то вроде краски, чтобы я мог понять, чего именно вы хотите?
2. как насчет использования
transform: translateY(100px)
в вашем образе?3. Или минус нижняя маржа ?
4. Очевидно, мне пришлось установить фиксированную высоту своего рода для моего родительского div, чтобы получить желаемый эффект. Спасибо вам за альтернативные варианты. 😁
Ответ №1:
Это тот желаемый эффект, который вы ищете? Я только что добавил фиксированную высоту к вашему внешнему .version2
контейнеру:
.version2 {
background-color: lightblue;
display: flex;
justify-content: space-evenly;
height: 2rem; /* added a fixed height */
}
.version2 div {
padding: 5px 0 5px 0;
align-self: center;
}
#propic{
border-radius: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyHeader</title>
<link rel="stylesheet" href="styles/stylesheet.css">
</head>
<body>
<div class="version2">
<div><strong>Name:</strong> Tahmin Ahmed </div>
<div><strong>ID:</strong> 123456</div>
<picture>
<img id="propic" src="https://i.stack.imgur.com/av1Fi.png" alt="My Profile picture">
</picture>
</div>
</body>
</html>
Комментарии:
1. Это именно то, что нужно! Спасибо!