一种解决方法是使用flexbox来对齐两段文本。下面是一个代码示例:
HTML代码:
第一段文本
第二段文本
CSS代码:
.container {
display: flex;
justify-content: space-between;
}
.text1, .text2 {
flex-grow: 1;
}
在上面的代码中,我们使用了一个包含两个div
元素的容器,并将其设为flex布局。justify-content: space-between
属性使得两个文本段落之间的空间平均分配,从而实现对齐效果。
flex-grow: 1
属性将两个文本段落的宽度设置为相等,使它们在容器中平均分配可用的空间。
这样,无论文本的长度如何变化,两段文本都会保持对齐。