如何使用可变文本基线垂直对齐项目

Question

我需要对齐一个项目列表，这些项目应该以不同长度且底部对齐的标题为基线。 图像应始终位于 position 顶部。

我尝试将列表容器设置为 display:table 并将项目设置为 display: table-cell, vertical-align: baseline。 我可以将表格单元格的项目设置为具有 position: relative，并将图像设置为 position:absolute 和 top: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>

http://jsfiddle.net/q0nbp54v/

请参阅下面的图片我到目前为止所做的事情。 我的进步图片

Answer 1

 <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>

这是你需要的吗？

如何使用可变文本基线垂直对齐项目

问题描述

1 个解决方案

解决方案1
0 2019-10-05 18:12:24

如何使用可变文本基线垂直对齐项目

问题描述

1 个解决方案

解决方案1 0 2019-10-05 18:12:24

解决方案1
0 2019-10-05 18:12:24