如何调整评论文本对齐，使其位于用户头像下方？

云原生阿岚

2026-6-19

问题

我需要实现评论文本在用户头像下方的布局效果，但目前我的代码里评论文本显示在头像旁边，请问问题出在哪？该怎么调整？

原实现代码

HTML

<div class="custom-box">
  <div class="comments-container">
    <div class="dropdown-container p" onclick="toggleDropdown()">
      <span class="mt-1">التعليقات</span>
      <span class="arrow mt-1"></span>
    </div>
    <div id="dropdownContent" class="dropdown-content">
      <h3>إضافة تعليق</h3>
      <div class="comment-input-container">
        <input type="text" id="commentText" class="comment-input" />
      </div>
      <button onclick="addComment()" class="add-comment-button"> أضف </button>
      <div id="commentsList"></div>
    </div>
  </div>
</div>

CSS

.comments-container {
  padding-bottom: 0px !important;
}

.dropdown-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  cursor: pointer;
  font-weight: 900;
}

.dropdown-container:hover {
  opacity: 0.8;
}

.dropdown-container .arrow {
  padding: 15px;
  border-radius: 3px;
  height: 50px;
  color: black;
  padding-right: 30px;
  font-size: 14px;
  position: relative;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>") no-repeat;
  background-position: right 5px top 50%;
}

.dropdown-content {
  display: none;
  padding: 20px;
  border-radius: 8px;
  margin-top: 10px;
}

.dropdown-content.show {
  display: block;
}

.comment-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background-color: white;
  padding: 10px;
  border-radius: 15px;
  margin-top: 10px;
  margin-left: 10px;
  border: 1px solid #ddd;
}

.comment-card img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-left: 10px;
}

.comment-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: 10px;
}

.comment-header .user-name {
  font-size: 14px;
  font-weight: 900;
  color: #000;
}

.comment-header .comment-date {
  font-size: 12px;
  color: #888;
}

.comment-text {
  margin-top: 5px;
  font-size: 16px;
  padding-left: 10px;
}

.add-comment-button {
  padding: 10px 20px;
  background-color: #0056b3;
  color: white;
  border: none;
  border-radius: 35px;
  width: 150px;
  height: 42px;
  cursor: pointer;
  margin-top: 20px;
  margin-left: 10px;
}

.add-comment-button:hover {
  background-color: #004494;
}

.comment-input-container {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.comment-input {
  flex-grow: 1;
  border-radius: 10px;
  border: 1px solid #ddd;
  padding: 10px;
  margin-left: 10px;
  height: 60px;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  addDefaultComment(); // 页面加载时添加默认评论
  keepDropdownOpen(); // 默认保持下拉菜单展开
});

function toggleDropdown() {
  const dropdownContent = document.getElementById("dropdownContent");
  dropdownContent.classList.toggle("show");
}

function keepDropdownOpen() {
  const dropdownContent = document.getElementById("dropdownContent");
  dropdownContent.classList.add("show"); // 默认保持下拉菜单展开
}

function addComment() {
  const commentText = document.getElementById("commentText").value;
  if (commentText.trim() === "") return;

  createCommentElement(commentText, "زائر"); // 若有实际用户名，替换"زائر"

  document.getElementById("commentText").value = "";
}

function createCommentElement(commentText, userName) {
  const commentList = document.getElementById("commentsList");
  const newComment = document.createElement("div");
  newComment.classList.add("comment-card");

  const userImage = document.createElement("img");
  userImage.src = "https://via.placeholder.com/40"; // 占位图片
  newComment.appendChild(userImage);

  const commentContent = document.createElement("div");
  commentContent.classList.add("comment-content");

  const commentHeader = document.createElement("div");
  commentHeader.classList.add("comment-header");

  const userNameElement = document.createElement("span");
  userNameElement.classList.add("user-name");
  userNameElement.innerText = userName;
  commentHeader.appendChild(userNameElement);

  const commentDate = document.createElement("span");
  commentDate.classList.add("comment-date");
  const date = new Date();
  commentDate.innerText = `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
  commentHeader.appendChild(commentDate);

  commentContent.appendChild(commentHeader);

  // 在评论头部后添加换行
  const lineBreak = document.createElement("br");
  commentContent.appendChild(lineBreak);

  const commentTextElement = document.createElement("div");
  commentTextElement.classList.add("comment-text");
  commentTextElement.innerText = commentText;

  commentContent.appendChild(commentTextElement);
  newComment.appendChild(commentContent);

  commentList.appendChild(newComment);
}


function addDefaultComment() {
  const defaultCommentText = "هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!";
  createCommentElement(defaultCommentText, "زائر");
}

document.getElementById("commentText").addEventListener("keypress", function(event) {
  if (event.key === "Enter") {
    event.preventDefault(); // 阻止Enter键默认行为
    addComment();
  }
});

问题分析与修复

问题根源

你的.comment-card设置了flex-direction: row，这会让头像和评论内容横向并排，所以评论文本会出现在头像旁边，而非下方。

修复步骤

修改评论卡片的flex方向：把.comment-card的flex-direction: row改成column，让内部元素垂直排列
调整头像间距：给头像添加底部间距，让它和下方的评论内容更美观
移除冗余的换行元素：JS代码里的<br>可以删掉，flex垂直布局已经会让评论头部和文本自动换行

修改后的关键代码

调整后的CSS（仅修改`.comment-card`和头像样式）

.comment-card {
  display: flex;
  flex-direction: column; /* 改为垂直排列 */
  align-items: flex-start; /* 头像和内容左对齐，可按需改成center */
  background-color: white;
  padding: 10px;
  border-radius: 15px;
  margin-top: 10px;
  margin-left: 10px;
  border: 1px solid #ddd;
}

.comment-card img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-left: 10px;
  margin-bottom: 8px; /* 增加头像与评论内容的间距 */
}

调整后的JavaScript（移除冗余的`<br>`）

function createCommentElement(commentText, userName) {
  const commentList = document.getElementById("commentsList");
  const newComment = document.createElement("div");
  newComment.classList.add("comment-card");

  const userImage = document.createElement("img");
  userImage.src = "https://via.placeholder.com/40"; // 占位图片
  newComment.appendChild(userImage);

  const commentContent = document.createElement("div");
  commentContent.classList.add("comment-content");

  const commentHeader = document.createElement("div");
  commentHeader.classList.add("comment-header");

  const userNameElement = document.createElement("span");
  userNameElement.classList.add("user-name");
  userNameElement.innerText = userName;
  commentHeader.appendChild(userNameElement);

  const commentDate = document.createElement("span");
  commentDate.classList.add("comment-date");
  const date = new Date();
  commentDate.innerText = `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
  commentHeader.appendChild(commentDate);

  commentContent.appendChild(commentHeader);

  // 移除多余的br元素，flex column会自动垂直排列
  // const lineBreak = document.createElement("br");
  // commentContent.appendChild(lineBreak);

  const commentTextElement = document.createElement("div");
  commentTextElement.classList.add("comment-text");
  commentTextElement.innerText = commentText;

  commentContent.appendChild(commentTextElement);
  newComment.appendChild(commentContent);

  commentList.appendChild(newComment);
}

修改完成后，头像会显示在上方，评论内容（用户名、日期、文本）会在头像下方垂直排列，符合目标布局效果。

内容的提问来源于stack exchange，提问作者nabil1997

如何调整评论文本对齐，使其位于用户头像下方？

原实现代码 #

HTML

CSS

JavaScript

问题分析与修复 #

问题根源 #

修复步骤 #

修改后的关键代码 #

调整后的CSS（仅修改.comment-card和头像样式）

调整后的JavaScript（移除冗余的<br>）