Question

我一直在困扰着几个小时，试图了解这种样式在做错什么。我有一个网页在左半部分显示用户帖子，在右半部分显示comment-section和评论表单。我有一个PostCommentSet类，其中包含所有comments和replies。现在，我的评论彼此重叠，应该放在前者的下面，以便它们都可见。如果评论中有任何回复，则应将回复放置在同一评论下方，然后当不再显示任何回复时，我们将继续提供更多评论。
像这样

Comment 1
...Reply 1 of comment 1
...Reply 2 of comment 1
Comment 2
Comment 3
...Reply 1 of comment 3
Comment 4
etc..

评论和回复类中有一些具有定位的元素，这就是搞砸了吗？

如果您对我的代码有任何疑问，我将随时回答。

我的CSS

.PostCommentSet {
            position: absolute;
            right: 0px;
            top: 60px;
            width: 30%;
            height: calc(100vh - 207px);
            background-color: #777;
            padding: 10px 2.5% 0px 1%;
            overflow: scroll;
            overflow-x: hidden;
        }
.PostComments {
            background-color: #555;
            padding: 10px;
            border-radius: 4px;
            color: white;
            width: 90%;
            height: auto;
            box-shadow: 0px 0px 5px black;
            position: static;
            z-index: 2;
            display: inline-block;
        }
.PostReplies {
            background-color: #555;
            padding: 10px;
            color: white;       
            border-radius: 4px;
            width: 80%;
            height: auto;
            box-shadow: 0px 0px 5px black;
            position: static;
            z-index: 1;
            display: inline-block;
        }

我的PHP / HTML

while ($commenterrow = mysqli_fetch_assoc($commenterresult)) {

                                echo    '<div class="PostCommentSet"> <div class="PostComments">';

                                    if ($commenterrow['profileimg'] == 1) {
                                        $filename = "profilepics/profile".$commenterid."*";
                                        $fileinfo = glob($filename);
                                        $fileext = explode(".", $fileinfo[0]);
                                        $fileactualext = $fileext[1];
                                        echo "<div class='CommentProfilePicture'><img src='profilepics/profile".$commenterid.".".$fileactualext."?".mt_rand()."'></div>";
                                    }
                                    else {
                                        echo "<div class='CommentProfilePicture'><img src='profilepics/noUser.png'></div>";
                                    }
                                echo    "<div class='CommentUserName'>".$commenterrow['userName']."</div>";
                                echo    "<div class='CommenterComment'>".$commentrow['comment']."</div> </div>";
                            }
                            $currentcommentid = $commentrow['commentid'];
                            $replysql = "SELECT * FROM posts WHERE hostid = '$hostid' AND postid = '$postid' AND commentid = '$currentcommentid' AND replyid > 0";
                            $replyresult = mysqli_query($conn, $replysql);
                            while ($replyrow = mysqli_fetch_assoc($replyresult)) {
                                if (mysqli_num_rows($replyresult)==0) {
                                    echo '</div> <br>';
                                }
                                else {
                                    $replierid = $replyrow['userid'];
                                    $repliersql = "SELECT * FROM users WHERE userid = '$replierid'";
                                    $replierresult = mysqli_query($conn, $repliersql);
                                    while ($replierrow = mysqli_fetch_assoc($replierresult)) {

                                        echo    '<div class="PostReplies">';

                                            if ($replierrow['profileimg'] == 1) {
                                                $filename = "profilepics/profile".$replierid."*";
                                                $fileinfo = glob($filename);
                                                $fileext = explode(".", $fileinfo[0]);
                                                $fileactualext = $fileext[1];
                                                echo "<div class='ReplyProfilePicture'><img src='profilepics/profile".$replierid.".".$fileactualext."?".mt_rand()."'></div>";
                                            }
                                            else {
                                                echo "<div class='ReplyProfilePicture'><img src='profilepics/noUser.png'></div>";
                                            }
                                    echo '
                                                <div class="ReplyUserName">'.$replierrow['userName'].'</div>
                                                <div class="ReplierReply">'.$replyrow['reply'].'</div>
                                            </div>
                                        </div>

Answer 1

这里很难看到其余的CSS，但是我对为什么在inline-block和postReplies元素上使用postComments级别显示感到困惑。此属性适用于元素本身，而不适用于其中的子元素。我建议将它们都更改为block显示，然后看看是否有帮助。另外，也无需声明position:static。

您能做的最好的事情是剥离标记并创建一个小提琴来复制您的问题。从那里可以轻松解决。否则，请为您的整个（相关）标记发布CSS。

如何设置这些div标签的样式以获取可用的评论部分？

1 个答案: