我想问一下如何使不同卡片中具有不同文本长度的所有按钮位于同一位置。按钮应该在卡片的末端。
This is what i want
。这是我的HTML,CSS代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: #f0f0f0;
}
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 100px;
}
.card {
width: 325px;
background-color: #f0f0f0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
margin: 20px;
}
.card img {
width: 100%;
height: auto;
}
.card-content {
padding: 16px;
}
.card-content h3 {
font-size: 28px;
margin-bottom: 8px;
}
.card-content p {
color: #666;
font-size: 15px;
line-height: 1.3;
}
.card-content .btn {
display: inline-block;
padding: 8px 16px;
background-color: #333;
text-decoration: none;
border-radius: 4px;
margin-top: 16px;
color: #fff;
}
</style>
<body>
<div class="card-container">
<div class="card">
<img
src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
/>
<div class="card-content">
<h3>This is title of card 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra
maecenas accumsan lacus vel facilisis volutpat. Aliquam etiam erat
velit scelerisque in dictum non consectetur. urus in massa tempor
nec feugiat nisl pretium fusce id.
</p>
<a href="" class="btn">Read More</a>
</div>
</div>
<div class="card">
<img
src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
/>
<div class="card-content">
<h3>This is title of cards 2 and it is longer</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<a href="" class="btn">Read More</a>
</div>
</div>
<div class="card">
<img
src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
/>
<div class="card-content">
<h3>This is title of card 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat
pellentesque adipiscing commodo elit at imperdiet dui.
</p>
<a href="" class="btn">Read More</a>
</div>
</div>
</div>
</body>
</html>
谢谢你的进一步回答。如果你还有其他建议,请告诉我,谢谢。
