html - 如何使用可变文本基线垂直对齐项目
问题描述
我需要对齐一个项目列表,这些项目应该以不同长度且底部对齐的标题为基线。图像应始终位于顶部位置。
我尝试将列表容器设置为 display:table 并将项目设置为 display: table-cell, vertical-align: baseline。我可以将表格单元格的项目设置为位置:相对,并将图像设置为位置:绝对和顶部: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>
请参阅下面的图片我到目前为止所做的事情。 我的进步图片
解决方案
<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>
这是你需要的吗?
推荐阅读
- python - 我需要在一个屏幕中绘制多个 mayavi 图,并且可以一次选择一个
- sql - 在 Spark2 Scala 中找不到 Hive 表
- node.js - PayPal 节点 SDK:货币金额必须为非负数
- ruby-on-rails - 如何在thinking-sphinx上转义或转换特定字母
- html - 基于 XPath 中的列 (td) 获取 HTML 表列名称
- logging - 大量 URL 请求的模式聚合
- c++ - 如何枚举已分配指定用户权限的所有 SID?C++
- java - Java:循环等待,直到 ThreadPoolExecutor 的任务完成后再继续
- php - 未找到 Laravel 自定义作曲家 libaray 类
- tags - 如何在 Runner 类中对 Cucumber 标签进行排序