我需要对齐一个元素列表，这些元素应该以长度不同且底部对齐的标题为基线。图片应始终位于顶部。
我试过将列表容器设置为 display:table 并将元素设置为 display: table-cell, vertical-align: baseline。我可以将表格单元格的元素设置为position:relative，并将图像设置为position:absolute和顶部:0，但一旦标题很长，这就会失败。
基本上，这是代码:
<div class="container">
<div class="item">
<img src="http://dummyimage.com/100x60/000/fff" alt="ALT">
<h2>
title
</h2>
<p>Lorem<br>ipsum</p>
</div>
<div class="item">
<img src="http://dummyimage.com/100x60/000/fff" alt="ALT">
<h2>
longer title
</h2>
<p>Lorem<br>ipsum</p>
</div>
<div class="item">
<img src="http://dummyimage.com/100x60/000/fff" alt="ALT">
<h2>
long long long long title
</h2>
<p>Lorem<br>ipsum</p>
</div>
<div class="item">
<img src="http://dummyimage.com/100x60/000/fff" alt="ALT">
<h2>
not long title
</h2>
<p>Lorem<br>ipsum</p>
</div>
</div>
<style>
.container {
display: table;
border: 1px solid grey;
}
.item {
background: yellow;
display: table-cell;
padding: 10px;
vertical-align: bottom;
max-width:100px;
}
.item h2 {
vertical-align: bottom; /* only needed for removing a few pixel gap between image and paragraph */
border-bottom: 1px solid;
padding-bottom:10px;
}
.item p {
margin: 0;
text-align: left;
}
</style>
请参阅下图我目前所做的工作。 image of my progress
最佳答案
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 600px;
}
.flex-card {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-basis: 0;
flex-grow: 1;
margin: 15px;
}
.flex-card div {
display: flex;
flex-direction: column;
}
span {
border-bottom: 1px solid #ddd;
padding: 15px;
}
a {
margin: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="flex-card">
<img src="https://via.placeholder.com/300x200">
<div>
<span>Lorem ipsum dolsdfgvfgpk fgiko kkdfl;gkdf; l;kdfkgfl;dk or sit amet</span>
<a href="/">View Idea Starter</a>
</div>
</div>
<div class="flex-card">
<img src="https://via.placeholder.com/300x200">
<div>
<span>Lorem ipsum dolor sit amet</span>
<a href="/">View Idea Starter</a>
</div>
</div>
<div class="flex-card">
<img src="https://via.placeholder.com/300x200">
<div>
<span>Lorem ipsum dolsdfgvfgpk fgiko kkdfl;gkdf; l;kdfkgfl;dk or sit amet</span>
<a href="/">View Idea Starter</a>
</div>
</div>
</div>
</body>
</html>这是您需要的吗？
关于html - 如何使用可变文本基线垂直对齐元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58250928/