Как выровнять дату независимо от длины комментариев ⇐ CSS

[Anonymous]

Как показано на рисунке
Я хочу, чтобы дата всегда выравнивалась по левому краю, независимо от длины комментария, как и самый длинный комментарий.


Мой текущий код выглядит следующим образом:
LatestReviewList.vue
Это самая внешняя часть.

Код: Выделить всё

全站最新点评

:showAuthor="true"
:showAvatar="true"
@update:array-size="handleArraySizeChange"
/>





.card {
width: 1000px;
margin: 0 auto;
background-color: var(--background-color);
padding: 16px;
box-shadow: 0 2px 4px var(--border-color);
border-radius: 8px;
}
.latest-reviews-container {
text-align: center;
margin-top: 10px;
width: 100%;
}

PostPreViewList.vue
Это список.

Код: Выделить всё

:author="post.author"
:avatar="post.avatar"
:time="post.time"
:course="post.course"
:teacher="post.teacher"
:content="post.content.comment"
:showAuthor="showAuthor"
:showAvatar="showAvatar"
/>

PostPreView.vue
Это компонент

Код: Выделить всё

{{ author }}


点评了


{{ course }}({{ teacher }})



{{ time }}


{{ truncatedContent }}

>>更多











a {
text-decoration: none;
}
.review-container {
padding: 10px 0;
width: 100%;
}
.avatar-container {
margin-right: 10px;
}
.content {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.8;
font-size: 14px;
color: var(--text-color);
}
.read-more {
color: var(--read-more-color);
cursor: pointer;
margin-left: 4px;
}
.info-container {
display: flex;
flex-direction: column;
width: 100%; /* 确保占据整个可用空间 */
}
.top-row {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: space-between; /* 左右分布 */
width: 100%;
}

.time {
color: var(--date-color);
font-size: 12px;
margin-left: auto; /* 如果不使用 space-between，也可通过 margin-left: auto 推到右侧 */
}
.author {
font-weight: bold;
color: var(--author-name);
}
.content-container {
display: flex;
width: 100%;
}
.course-teacher {
font-weight: bold;
color: var(--course-teacher-color);
}
.large-font {
font-size: 18px;
}

В разделе стиля компонента я установил ширину всех контейнеров на 100 %, но они не заполняют внешний контейнер, как я ожидал. Вместо этого ширина верхней строки в конечном итоге оказывается такой же, как и у контейнера комментариев, и я подумал, что информационный контейнер должен быть таким же. Другими словами, ширина определяется изнутри. Однако я не хочу относиться к этому таким образом. Я хочу, чтобы их ширина была фиксирована и заполняла внешний контейнер. Но я не могу установить фиксированную длину, поэтому не знаю, что делать.

Подробнее здесь: https://stackoverflow.com/questions/792 ... f-comments