英文:
How do i stack a title and a subtitle below it?
问题
我是一个有抱负的网页开发者，这是我面临的第一个挑战，Chat GPT在这方面也无法帮到我，到目前为止我尝试过的所有方法都失败了。所以，我在这里尝试的是让“2004年，21首歌曲，1小时16分钟”显示在标题“大学辍学生”下方，并且当然要对齐，创建一个类似于在搜索专辑时看到的Spotify布局 网页。
我尝试过将flex显示更改为块，但没有效果，如果我尝试更改其他所有内容，比如flex显示，会使网站变得不响应。请帮帮我。
英文:
I'm an aspiring web developer and this is the first challenge that I'm facing, Chat GPT couldn't help me either on this one, everything that I've tried so far has failed. So, what I'm trying to do here is make the "2004, 21 songs, 1 h 16 min" be positioned below the title "The College Dropout" and of course to be aligned, to create a Spotify alike layout when you are searching for an album webpage.
I have tried changing the flex display to block, but it doesn't anything and if I try to change everything else like the flex display it makes the website unresponsive I think. Please, help me.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
*,
*: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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案1
得分: 1
在你的HTML中添加一个新的div，只包含标题和副标题，像这样：
<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首歌曲, 1小时16分钟</h2>
</div>
</div>
让我知道这是否有效。
<details>
<summary>英文:</summary>
add a new div containing only the title and subtitle like so in your 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>
let me know if this works
</details>
# 答案2
**得分**: 1
尝试使用 [Grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)
```css
.image-container {
display: grid;
grid-template-columns: clamp(200px, 50%, 400px) auto;
}
.image-style {
grid-row-start: span 2;
}
.container {
/* 背景: rgb(65, 18, 24); */
背景: rgb(65, 18, 24) 线性渐变(
0deg,
rgba(65, 18, 24, 1) 0%,
rgba(232, 152, 46, 1) 100%
);
上内边距: 2rem;
下内边距: 5rem;
}
.image-container {
/* 显示: flex; */
显示: grid;
网格模板列: clamp(200px, 50%, 400px) auto;
左外边距: 2rem;
对齐项目: center;
}
.image-style {
网格行起始: 跨度 2;
宽度: clamp(200px, 50%, 400px);
右外边距: 1rem;
}
.image-container .title-style {
上外边距: 2rem;
下外边距: 2rem;
字体大小: clamp(1rem, 5vw + 1rem, 6rem);
颜色: 白色;
字体系列: Hiragino;
/* 显示: block; */
}
<div class="container">
<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>
英文:
Try using Grid
.image-container {
display: grid;
grid-template-columns: clamp(200px, 50%, 400px) auto;
}
.image-style {
grid-row-start: span 2;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
/* background: rgb(65, 18, 24); */
background: rgb(65, 18, 24) linear-gradient(
0deg,
rgba(65, 18, 24, 1) 0%,
rgba(232, 152, 46, 1) 100%
);
padding-top: 2rem;
padding-bottom: 5rem;
}
.image-container {
/* display: flex; */
display: grid;
grid-template-columns: clamp(200px, 50%, 400px) auto;
margin-left: 2rem;
align-items: center;
}
.image-style {
grid-row-start: span 2;
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; */
}
<!-- language: lang-html -->
<div class="container">
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论