如何修复评论文本的对齐方式？

Question

我想将评论的文本放在用户图像下方，如下布局：

这是当前的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>

这是造型：

.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 :

            <script>
document.addEventListener("DOMContentLoaded", function () {
    addDefaultComment(); // Add a default comment when the page loads
    keepDropdownOpen();  // Keep the dropdown open by default
});

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

function keepDropdownOpen() {
    const dropdownContent = document.getElementById("dropdownContent");
    dropdownContent.classList.add("show"); // Keep the dropdown open by default
}

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

    createCommentElement(commentText, "زائر"); // Replace "زائر" with actual user name if available

    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"; // Placeholder image
    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);

    // Add a line break after the comment header
    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(); // Prevents the default action of the Enter key
        addComment();
    }
});

            </script>

我应该怎么做才能获得像图像一样的所需输出？

评论的文本应该从用户图像下方开始，我的输出显示评论的文本在其旁边而不是在其下方，有什么问题？或者我错过了什么？请指出正确的方法

Answer 1

只需将 CSS

text-align:right;

应用于

.comment-card

类即可解决该问题。

.comment-card { 文本对齐：右； }