我是一名有抱负的网络开发人员，这是我面临的第一个挑战，Chat GPT 在这方面也无法帮助我，到目前为止我尝试过的一切都失败了。因此，我在这里尝试做的是将“2004 年，21 首歌曲，1 小时 16 分钟”放置在标题“The College Dropout”下方，当然要对齐，以便在您使用时创建类似 Spotify 的布局。正在搜索专辑webpage .
我尝试将柔性显示更改为阻止，但它没有任何作用，如果我尝试更改其他所有内容(例如柔性显示)，我认为它会使网站无响应。请帮助我。
*,
*:before,
*:after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
@font-face {
font-family: Hiragino;
src: url(../assets/fonts/hiragino-kaku-gothic.otf);
}
:root {
--step--2: clamp(0.56rem, calc(0.48rem + 0.41vw), 0.8rem);
--step--1: clamp(0.68rem, calc(0.56rem + 0.56vw), 1rem);
--step-0: clamp(0.81rem, calc(0.66rem + 0.76vw), 1.25rem);
--step-1: clamp(0.98rem, calc(0.77rem + 1.02vw), 1.56rem);
--step-2: clamp(1.17rem, calc(0.9rem + 1.36vw), 1.95rem);
--step-3: clamp(1.4rem, calc(1.04rem + 1.8vw), 2.44rem);
--step-4: clamp(1.69rem, calc(1.21rem + 2.38vw), 3.05rem);
--step-5: clamp(2.02rem, calc(1.4rem + 3.12vw), 3.82rem);
}
html {
background-color: white;
}
.container {
background: rgb(65, 18, 24);
background: linear-gradient( 0deg, rgba(65, 18, 24, 1) 0%, rgba(232, 152, 46, 1) 100%);
padding-top: 2rem;
padding-bottom: 5rem;
}
ul {
display: flex;
justify-content: right;
list-style: none;
padding-bottom: 1rem;
}
li {
margin: 0 10px;
}
a {
color: grey;
text-decoration: none;
padding: 10px;
font-family: Hiragino;
font-size: 0.7rem;
}
a:hover {
color: white;
}
/* Responsive styles */
@media (max-width: 768px) {
ul {
flex-wrap: wrap;
}
li {
width: 100%;
text-align: center;
}
}
.image-container {
display: flex;
margin-left: 2rem;
align-items: center;
}
.image-style {
width: clamp(200px, 50%, 400px);
margin-right: 1rem;
}
.image-container .title-style {
margin-top: 2rem;
margin-bottom: 2rem;
font-size: clamp(1rem, 5vw + 1rem, 6rem);
color: white;
font-family: Hiragino;
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The College Dropout</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="container">
<div class="navbar-default">
<nav>
<ul>
<li>
<a href="../index.html">Home</a>
<a href="">About Me</a>
<a href="">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="image-container">
<img class="image-style" src="../assets/images/college-dropout.jpg" alt="the-college-dropout">
<h1 class="title-style">The College Dropout</h1>
<h2 class="subtitle-style">2004, 21 songs, 1 h 16 min</h2>
</div>
</div>
</div>
</body>
</html>最佳答案
添加一个仅包含标题和副标题的新 div，就像在 html 中一样:
<div class="image-container">
<img class="image-style" src="../assets/images/college-dropout.jpg" alt="the-college-dropout">
<div>
<h1 class="title-style">The College Dropout</h1>
<h2 class="subtitle-style">2004, 21 songs, 1 h 16 min</h2>
</div>
</div>
让我知道这是否有效
关于html - 如何在其下方堆叠标题和副标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/76601392/