我正在开发一个网页布局，我需要创建一个具有不同行高的灵活的列结构。目标是让一列具有更高的行高，同时确保不同列中的两个段落文本从顶部/同一行位置开始。
我尝试使用以下 HTML 和 CSS 来实现此目的：
正如您所看到的，右侧的黄色文本与左侧的文本并非从完全相同的行开始。
谢谢你
<html>
<head>
<style>
.columnA {
color: white;
margin-right: 15px;
}
.columnB {
color: yellow;
align-self: start;
margin-bottom: 20px;
vertical-align: top;
}
.comment.title {
display: grid;
color: yellow;
text-align: center;
margin-bottom: 20px;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.comment.columnA {
color: green;
line-height: 1.4;
}
.comment.columnB {
color: yellow;
line-height: 2.4;
}
.content {
display: grid;
margin-bottom: 20px;
align-content: start;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.black-background {
background-color: black;
}
</style>
</head>
<body class="black-background">
<div class="comment">
<div class="comment title">
<p class="columnA">TitleA</p>
<p class="columnB">TitleB</p>
</div>
<div class="content">
<p class="comment columnA">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
</p>
<p class="comment columnB">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
</p>
</div>
</div>
</body>
</html>lhmargin-top-0.5lh.comment {
margin-top: -0.5lh;
}
但是由于段落向上移动，因此您可能需要使用前一个元素的
margin-bottommargin-top.comment {
margin-top: calc(20px - 0.5lh);
}
<html>
<head>
<style>
.columnA {
color: white;
margin-right: 15px;
}
.columnB {
color: yellow;
align-self: start;
margin-bottom: 20px;
vertical-align: top;
}
.comment {
margin-top: -0.5lh;
}
.comment.title {
display: grid;
color: yellow;
text-align: center;
margin-bottom: 40px;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.comment.columnA {
color: green;
line-height: 1.4;
}
.comment.columnB {
color: yellow;
line-height: 2.4;
}
.content {
display: grid;
margin-bottom: 20px;
align-content: start;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.black-background {
background-color: black;
}
</style>
</head>
<body class="black-background">
<div class="comment">
<div class="comment title">
<p class="columnA">TitleA</p>
<p class="columnB">TitleB</p>
</div>
<div class="content">
<p class="comment columnA">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
</p>
<p class="comment columnB">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
</p>
</div>
</div>
</body>
</html>