我正在尝试不使用 JavaScript 创建布局，就像附加的图片一样， 顶部和底部是文本，中间是图像，我应该怎么做才能在不使用 JavaScript 和网格的情况下使图像相互对齐。顶部和底部文本也是动态的，可以是任意长度。
最佳答案
html, body { margin: 0; }
.containers {
display: flex;
}
.container {
display: flex;
width: 300px;
flex-direction: column;
}
main {
flex-grow: 1;
display: flex;
flex-direction: column;
background-color: #eee;
}
main > img {
margin-top: auto;
max-width: 100%;
height: auto;
}
header, footer {
background-color: #ccc;
padding: 1em;
text-align: center;
height: 38px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Align Image inline</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="containers">
<div class="container">
<header>Header Header Header Header Header Header
Header Header Header Header Header Header
Header Header Header Header Header Header</header>
<main>
<img src="https://placekitten.com/g/400/200" alt="" />
</main>
<footer>Footer</footer>
</div>
<div class="container">
<header>Header</header>
<main>
<img src="https://placekitten.com/g/400/200" alt="" />
</main>
<footer>Footer Footer Footer Footer Footer Footer Footer Footer </footer>
</div>
<div class="container">
<header>Header</header>
<main>
<img src="https://placekitten.com/g/400/200" alt="" />
</main>
<footer>Footer</footer>
</div>
</div>
</body>
</html>如果标题超过3行，添加css添加省略号
关于css - 当上面和底部的文本是任意长度时，如何内联对齐卡片图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54801755/