css如何制作固定卡片内容
How to make a fixed card content in css
我想做一张卡片,有图片、文字和按钮。卡片中的按钮应该固定在卡片底部,但我的按钮位置取决于文字。我希望我的按钮位置固定在卡片的底部,无论文字多少。
我怎样才能做到这一点?
截图如下:
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #345676;
}
* {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.25rem;
}
h3 {
font-size: 1rem;
}
h4 {
font-size: 0.75rem;
}
button {
padding: 0.5rem 1rem;
border: 0;
border-radius: 0.25rem;
cursor: pointer;
background-color: #cccccc;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
button:hover {
background-color: #d9d9d9;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.Track {
text-align: center;
font-family: "Courier New", Courier, monospace;
color: #ffffff;
}
.title {
margin-top: 2rem;
margin-bottom: 1rem;
}
.track-list {
display: flex;
flex-wrap: wrap;
}
.track-item {
display: flex;
width: 25%;
justify-content: center;
margin: 1rem 0;
}
.album {
border-radius: 1rem;
background-color: rgba(255, 255, 255, 0.2);
width: 15rem;
padding: 1rem 0.5rem;
}
.album-image {
width: 80%;
margin: auto;
margin-bottom: 1rem;
}
.album-image img {
border-radius: 1rem;
}
.album-info {
padding: 1rem;
/* background-color: cadetblue; */
}
.album-info h2 {
margin-bottom: 0.5rem;
}
.album-info h4 {
margin-bottom: 1rem;
}
.album-info button {
background-color: #921233;
color: white;
width: 100%;
}
.album-info button:hover {
background-color: #92a113;
}
<div class="Track">
<h1 class="title">Song Playlist</h1>
<div class="track-list">
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquam sint dolorum quasi labore dolore inventore voluptatum nostrum adipisci est temporibus iure in, obcaecati neque tenetur tempore nisi sapiente molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquamiente molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisqadipisci est temporibus iure in, obcaecati neque tenetur tempore nisi sapiente molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum do sapiente molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquam sint dolorum quasi labore dolore inventore voluptatum molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
</div>
</div>
将 class 按钮更改为此并添加相对于 class 专辑的位置
.button {
padding: 0.5rem 1rem;
border: 0;
border-radius: 0.25rem;
cursor: pointer;
background-color: #cccccc;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
position: absolute;
left: 0;
bottom: 0;
}
.album {
position: relative;
border-radius: 1rem;
background-color: rgba(255, 255, 255, 0.2);
width: 15rem;
padding: 1rem 0.5rem;
}
祝你好运:]
将此行添加到您的 .album-info
class:
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 87%;
这条线到你的 .album-info button
class:
margin-top: auto;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #345676;
}
* {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.25rem;
}
h3 {
font-size: 1rem;
}
h4 {
font-size: 0.75rem;
}
button {
padding: 0.5rem 1rem;
border: 0;
border-radius: 0.25rem;
cursor: pointer;
background-color: #cccccc;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
button:hover {
background-color: #d9d9d9;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.Track {
text-align: center;
font-family: "Courier New", Courier, monospace;
color: #ffffff;
}
.title {
margin-top: 2rem;
margin-bottom: 1rem;
}
.track-list {
display: flex;
flex-wrap: wrap;
}
.track-item {
display: flex;
width: 25%;
justify-content: center;
margin: 1rem 0;
}
.album {
border-radius: 1rem;
background-color: rgba(255, 255, 255, 0.2);
width: 15rem;
padding: 1rem 0.5rem;
}
.album-image {
width: 80%;
margin: auto;
margin-bottom: 1rem;
}
.album-image img {
border-radius: 1rem;
}
.album-info {
padding: 1rem;
/* background-color: cadetblue; */
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 87%;
}
.album-info h2 {
margin-bottom: 0.5rem;
}
.album-info h4 {
margin-bottom: 1rem;
}
.album-info button {
background-color: #921233;
color: white;
width: 100%;
margin-top: auto;
}
.album-info button:hover {
background-color: #92a113;
}
<div class="Track">
<h1 class="title">Song Playlist</h1>
<div class="track-list">
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquam sint dolorum quasi labore dolore inventore voluptatum nostrum adipisci est temporibus iure in, obcaecati neque tenetur tempore nisi sapiente molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquamiente molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisqadipisci est temporibus iure in, obcaecati neque tenetur tempore nisi sapiente molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum do sapiente molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquam sint dolorum quasi labore dolore inventore voluptatum molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
</div>
</div>
您可以使用 flex box 在 ablum 和 album info 组件上使用 flex grow 来做到这一点。我还必须在标题和信息 headers 周围添加一个 div,这样我就可以在两者之间做 space。
如果您使用 flex-grow,则可以避免设置精确的高度,并且在添加更多内容时会做出响应。
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #345676;
}
* {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.25rem;
}
h3 {
font-size: 1rem;
}
h4 {
font-size: 0.75rem;
}
button {
padding: 0.5rem 1rem;
border: 0;
border-radius: 0.25rem;
cursor: pointer;
background-color: #cccccc;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
button:hover {
background-color: #d9d9d9;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.Track {
text-align: center;
font-family: "Courier New", Courier, monospace;
color: #ffffff;
}
.title {
margin-top: 2rem;
margin-bottom: 1rem;
}
.track-list {
display: flex;
flex-wrap: wrap;
}
.track-item {
display: flex;
width: 25%;
justify-content: center;
margin: 1rem 0;
}
.album {
display: flex;
flex-direction: column;
justify-content:space-between;
border-radius: 1rem;
background-color: rgba(255, 255, 255, 0.2);
width: 15rem;
padding: 1rem 0.5rem;
}
.album-image {
width: 80%;
/* margin: auto; */
margin-bottom: 1rem;
}
.album-image img {
border-radius: 1rem;
}
.album-info {
padding: 1rem;
display: flex;
flex-grow: 1;
flex-direction:column;
justify-content:space-between;
/* background-color: cadetblue; */
}
.album-info:first-child {
flex-grow:1;
}
.album-info h2 {
margin-bottom: 0.5rem;
}
.album-info h4 {
margin-bottom: 1rem;
}
.album-info button {
background-color: #921233;
color: white;
width: 100%;
}
.album-info button:hover {
background-color: #92a113;
}
<div class="Track">
<h1 class="title">Song Playlist</h1>
<div class="track-list">
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<div>
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquam sint dolorum quasi labore dolore inventore voluptatum nostrum adipisci est temporibus iure in, obcaecati neque tenetur tempore nisi sapiente molestias.
</h4>
</div>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<div>
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquamiente molestias.
</h4>
</div>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<div>
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisqadipisci est temporibus iure in, obcaecati neque tenetur tempore nisi sapiente molestias.
</h4>
</div>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<div>
<h2>Title</h2>
<h4>
Lorem, ipsum do sapiente molestias.
</h4>
</div>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<div>
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquam sint dolorum quasi labore dolore inventore voluptatum molestias.
</h4>
</div>
<button>Select</button>
</div>
</div>
</div>
</div>
</div>
我想做一张卡片,有图片、文字和按钮。卡片中的按钮应该固定在卡片底部,但我的按钮位置取决于文字。我希望我的按钮位置固定在卡片的底部,无论文字多少。
我怎样才能做到这一点?
截图如下:
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #345676;
}
* {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.25rem;
}
h3 {
font-size: 1rem;
}
h4 {
font-size: 0.75rem;
}
button {
padding: 0.5rem 1rem;
border: 0;
border-radius: 0.25rem;
cursor: pointer;
background-color: #cccccc;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
button:hover {
background-color: #d9d9d9;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.Track {
text-align: center;
font-family: "Courier New", Courier, monospace;
color: #ffffff;
}
.title {
margin-top: 2rem;
margin-bottom: 1rem;
}
.track-list {
display: flex;
flex-wrap: wrap;
}
.track-item {
display: flex;
width: 25%;
justify-content: center;
margin: 1rem 0;
}
.album {
border-radius: 1rem;
background-color: rgba(255, 255, 255, 0.2);
width: 15rem;
padding: 1rem 0.5rem;
}
.album-image {
width: 80%;
margin: auto;
margin-bottom: 1rem;
}
.album-image img {
border-radius: 1rem;
}
.album-info {
padding: 1rem;
/* background-color: cadetblue; */
}
.album-info h2 {
margin-bottom: 0.5rem;
}
.album-info h4 {
margin-bottom: 1rem;
}
.album-info button {
background-color: #921233;
color: white;
width: 100%;
}
.album-info button:hover {
background-color: #92a113;
}
<div class="Track">
<h1 class="title">Song Playlist</h1>
<div class="track-list">
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquam sint dolorum quasi labore dolore inventore voluptatum nostrum adipisci est temporibus iure in, obcaecati neque tenetur tempore nisi sapiente molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquamiente molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisqadipisci est temporibus iure in, obcaecati neque tenetur tempore nisi sapiente molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum do sapiente molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquam sint dolorum quasi labore dolore inventore voluptatum molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
</div>
</div>
将 class 按钮更改为此并添加相对于 class 专辑的位置
.button {
padding: 0.5rem 1rem;
border: 0;
border-radius: 0.25rem;
cursor: pointer;
background-color: #cccccc;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
position: absolute;
left: 0;
bottom: 0;
}
.album {
position: relative;
border-radius: 1rem;
background-color: rgba(255, 255, 255, 0.2);
width: 15rem;
padding: 1rem 0.5rem;
}
祝你好运:]
将此行添加到您的 .album-info
class:
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 87%;
这条线到你的 .album-info button
class:
margin-top: auto;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #345676;
}
* {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.25rem;
}
h3 {
font-size: 1rem;
}
h4 {
font-size: 0.75rem;
}
button {
padding: 0.5rem 1rem;
border: 0;
border-radius: 0.25rem;
cursor: pointer;
background-color: #cccccc;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
button:hover {
background-color: #d9d9d9;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.Track {
text-align: center;
font-family: "Courier New", Courier, monospace;
color: #ffffff;
}
.title {
margin-top: 2rem;
margin-bottom: 1rem;
}
.track-list {
display: flex;
flex-wrap: wrap;
}
.track-item {
display: flex;
width: 25%;
justify-content: center;
margin: 1rem 0;
}
.album {
border-radius: 1rem;
background-color: rgba(255, 255, 255, 0.2);
width: 15rem;
padding: 1rem 0.5rem;
}
.album-image {
width: 80%;
margin: auto;
margin-bottom: 1rem;
}
.album-image img {
border-radius: 1rem;
}
.album-info {
padding: 1rem;
/* background-color: cadetblue; */
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 87%;
}
.album-info h2 {
margin-bottom: 0.5rem;
}
.album-info h4 {
margin-bottom: 1rem;
}
.album-info button {
background-color: #921233;
color: white;
width: 100%;
margin-top: auto;
}
.album-info button:hover {
background-color: #92a113;
}
<div class="Track">
<h1 class="title">Song Playlist</h1>
<div class="track-list">
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquam sint dolorum quasi labore dolore inventore voluptatum nostrum adipisci est temporibus iure in, obcaecati neque tenetur tempore nisi sapiente molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquamiente molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisqadipisci est temporibus iure in, obcaecati neque tenetur tempore nisi sapiente molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum do sapiente molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquam sint dolorum quasi labore dolore inventore voluptatum molestias.
</h4>
<button>Select</button>
</div>
</div>
</div>
</div>
</div>
您可以使用 flex box 在 ablum 和 album info 组件上使用 flex grow 来做到这一点。我还必须在标题和信息 headers 周围添加一个 div,这样我就可以在两者之间做 space。
如果您使用 flex-grow,则可以避免设置精确的高度,并且在添加更多内容时会做出响应。
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #345676;
}
* {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.25rem;
}
h3 {
font-size: 1rem;
}
h4 {
font-size: 0.75rem;
}
button {
padding: 0.5rem 1rem;
border: 0;
border-radius: 0.25rem;
cursor: pointer;
background-color: #cccccc;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
button:hover {
background-color: #d9d9d9;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.Track {
text-align: center;
font-family: "Courier New", Courier, monospace;
color: #ffffff;
}
.title {
margin-top: 2rem;
margin-bottom: 1rem;
}
.track-list {
display: flex;
flex-wrap: wrap;
}
.track-item {
display: flex;
width: 25%;
justify-content: center;
margin: 1rem 0;
}
.album {
display: flex;
flex-direction: column;
justify-content:space-between;
border-radius: 1rem;
background-color: rgba(255, 255, 255, 0.2);
width: 15rem;
padding: 1rem 0.5rem;
}
.album-image {
width: 80%;
/* margin: auto; */
margin-bottom: 1rem;
}
.album-image img {
border-radius: 1rem;
}
.album-info {
padding: 1rem;
display: flex;
flex-grow: 1;
flex-direction:column;
justify-content:space-between;
/* background-color: cadetblue; */
}
.album-info:first-child {
flex-grow:1;
}
.album-info h2 {
margin-bottom: 0.5rem;
}
.album-info h4 {
margin-bottom: 1rem;
}
.album-info button {
background-color: #921233;
color: white;
width: 100%;
}
.album-info button:hover {
background-color: #92a113;
}
<div class="Track">
<h1 class="title">Song Playlist</h1>
<div class="track-list">
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<div>
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquam sint dolorum quasi labore dolore inventore voluptatum nostrum adipisci est temporibus iure in, obcaecati neque tenetur tempore nisi sapiente molestias.
</h4>
</div>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<div>
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquamiente molestias.
</h4>
</div>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<div>
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisqadipisci est temporibus iure in, obcaecati neque tenetur tempore nisi sapiente molestias.
</h4>
</div>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<div>
<h2>Title</h2>
<h4>
Lorem, ipsum do sapiente molestias.
</h4>
</div>
<button>Select</button>
</div>
</div>
</div>
<div class="track-item">
<div class="album">
<div class="album-image">
<img src="#" alt="This will be an image" />
</div>
<div class="album-info">
<div>
<h2>Title</h2>
<h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate quisquam sint dolorum quasi labore dolore inventore voluptatum molestias.
</h4>
</div>
<button>Select</button>
</div>
</div>
</div>
</div>
</div>