在这里进行了大量的谷歌搜索后，我一直未能找到解决问题的方法。我无法按照我需要的方式显示垃圾桶图标。html正文中的段落是动态插入的，可以有不同的高度，所以我想显示垃圾桶图标并将其与每个相邻段落的顶部对齐。如何使用css/html来完成此操作？有关当前行为，请参见下文。
label {
font-size: larger;
}
div#output-container {
float: left;
display: block;
width: 90%;
}
div#output-container h2 {
text-align: center;
}
div.text {
float: left;
width: 40%;
margin: 1%;
}
div.text p {
word-break: break-all;
}
form {
float: left;
width: 50%;
}
mark {
background: #FF5733;
color: black;
}
h1.columns {
float: left;
width: 48%;
margin: 1%;
}
.container-top {
display: block;
width: 100%;
}
.container-bottom {
border-top: .25rem solid;
display: inline-block;
width: 90%;
}
.column {
float: left;
width: 45%;
margin: 0%;
}
#input-text {
background: #f7f7f7;
width: 100%;
height: 350px;
}
div#original-highlighted-text {
margin-top: 1.5%;
}
.lowercolumns p {
border-right: 3px dashed;
border-bottom: 3px solid;
}
#text-form {
margin-bottom: 10px;
}
i {
align-items: center;
padding: 5px;
font-size: 20px;
}
div.icon-div.text {
width: 100px;
margin: 1%;
}
div.icon-div span {
width: 100px;
margin: 1%;
}
#delete-column {
width: 10%;
}
#delete-column h2 {
margin-bottom: 10px;
}
.container-delete {
display: inline-block;
}<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="app.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container-bottom">
<!-- <i class="fas fa-trash-alt"></i> -->
<div id="output-container">
<!-- <h2>Original Text</h2> -->
<!-- <div id="original-highlighted-text" class="text">
<h2>Change Preview</h2>
<p id=highlightedp></p>
</div> -->
<div id="original-text" class="text lowercolumns">
<h2>Original Text</h2>
<p>asdfasdfadf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<!-- <h2>Changed Text</h2> -->
<div id="outputted-text" class="text lowercolumns">
<h2>Changed Text</h2>
<p>asdfasdfadf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div id="delete-column" class="text lowercolumns">
<h2>Delete</h2>
<div class="container-delete">
<div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
</div>
<div class="container-delete">
<div class="icon-div text"><span style="
width: 200px;
"><i class="fas fa-trash-alt"></i></span></div>
</div>
<div class="container-delete">
<div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
</div>
</div>
</div>
</div>
<script src="app.js" async="" defer=""></script>
<script src="mark.min.js"></script>
</body>
</html>如果您需要保存当前的html结构，那么您可以使用css属性display: grid和display: contents来解决这个问题。这不是最好的解决方案，但它有效。以下示例：
label {
font-size: larger;
}
div#output-container {
float: left;
display: block;
width: 90%;
}
div#output-container h2 {
text-align: center;
}
div.text {
float: left;
width: 40%;
margin: 1%;
}
div.text p {
word-break: break-all;
}
form {
float: left;
width: 50%;
}
mark {
background: #FF5733;
color: black;
}
h1.columns {
float: left;
width: 48%;
margin: 1%;
}
.container-top {
display: block;
width: 100%;
}
.container-bottom {
border-top: .25rem solid;
display: inline-block;
width: 90%;
}
.column {
float: left;
width: 45%;
margin: 0%;
}
#input-text {
background: #f7f7f7;
width: 100%;
height: 350px;
}
div#original-highlighted-text {
margin-top: 1.5%;
}
.lowercolumns p {
border-right: 3px dashed;
border-bottom: 3px solid;
}
#text-form {
margin-bottom: 10px;
}
i {
align-items: center;
padding: 5px;
font-size: 20px;
}
div.icon-div.text {
width: 100px;
margin: 1%;
}
div.icon-div span {
width: 100px;
margin: 1%;
}
#delete-column {
width: 10%;
}
#delete-column h2 {
margin-bottom: 10px;
}
.container-delete {
display: inline-block;
}
/*
!!! below are the new CSS changes !!!
*/
div#output-container {
display: grid;
grid-auto-flow: column;
}
div.text {
display: contents;
}
div.text:nth-child(1) > * {
grid-column: 1;
}
div.text:nth-child(2) > * {
grid-column: 2;
}
div.text:nth-child(3) > * {
grid-column: 3;
}<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="app.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container-bottom">
<!-- <i class="fas fa-trash-alt"></i> -->
<div id="output-container">
<!-- <h2>Original Text</h2> -->
<!-- <div id="original-highlighted-text" class="text">
<h2>Change Preview</h2>
<p id=highlightedp></p>
</div> -->
<div id="original-text" class="text lowercolumns">
<h2>Original Text</h2>
<p>asdfasdfadf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<!-- <h2>Changed Text</h2> -->
<div id="outputted-text" class="text lowercolumns">
<h2>Changed Text</h2>
<p>asdfasdfadf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div id="delete-column" class="text lowercolumns">
<h2>Delete</h2>
<div class="container-delete">
<div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
</div>
<div class="container-delete">
<div class="icon-div text"><span style="
width: 200px;
"><i class="fas fa-trash-alt"></i></span></div>
</div>
<div class="container-delete">
<div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
</div>
</div>
</div>
</div>
<script src="app.js" async="" defer=""></script>
<script src="mark.min.js"></script>
</body>
</html>尽管如此，我仍然建议查看您的html结构，对于表格(display: table(或基于网格(display: grid(的
您使用HTML结构可能有充分的理由。然而，我认为使用这种结构很难达到预期的结果。一个简单的解决方案是调整您的结构，使项目更容易对齐。
.container{
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
.header{
display: flex;
gap: 10px;
}
label {
font-size: larger;
}
div#output-container {
float: left;
display: block;
width: 90%;
}
div#output-container h2 {
text-align: center;
}
div.text {
float: left;
width: 40%;
margin: 1%;
}
div.text p {
word-break: break-all;
}
form {
float: left;
width: 50%;
}
mark {
background: #FF5733;
color: black;
}
h1.columns {
float: left;
width: 48%;
margin: 1%;
}
.container-top {
display: block;
width: 100%;
}
.container-bottom {
border-top: .25rem solid;
display: inline-block;
width: 90%;
}
.column {
float: left;
width: 45%;
margin: 0%;
}
#input-text {
background: #f7f7f7;
width: 100%;
height: 350px;
}
div#original-highlighted-text {
margin-top: 1.5%;
}
.lowercolumns p {
border-right: 3px dashed;
border-bottom: 3px solid;
}
#text-form {
margin-bottom: 10px;
}
i {
align-items: center;
padding: 5px;
font-size: 20px;
}
div.icon-div.text {
width: 100px;
margin: 1%;
}
div.icon-div span {
width: 100px;
margin: 1%;
}
#delete-column {
width: 10%;
}
#delete-column h2 {
margin-bottom: 10px;
}
.container-delete {
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container">
<div class="originalText text lowercolumns">
<p>asdfasdfadf</p>
</div>
<div class="changedText text lowercolumns">
<p>asdfasdfadf</p>
</div>
<div class="delete">
<p><i class="fas fa-trash-alt"></i></p>
</div>
</div>
<div class="container">
<div class="originalText text lowercolumns">
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div class="changedText text lowercolumns">
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div class="delete">
<p><i class="fas fa-trash-alt"></i></p>
</div>
</div>
<div class="container">
<div class="originalText text lowercolumns">
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div class="changedText text lowercolumns">
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div class="delete">
<p><i class="fas fa-trash-alt"></i></p>
</div>
</div>
</body>
</html>