當超過2個時，div超出div邊界

我有一個頁面，用戶可以在其中發布文本（簡單的標題和內容），其他用戶可以對這些帖子發表評論。但是，超過 2 條評論后，它們就落在了父帖子的邊界之外，越來越低，直到到達body

下面的代碼是我的 php 檔案中呈現的 HTML。

#content {
  margin: 20px;
}

#postcontent {
  resize: none;
  outline: none;
  border: 1px solid rgb(192, 192, 192);
  transition: all 0.5s ease;
  border-radius: 16px;
  padding: 10px;
  width: 100%;
}

#postcontent:focus {
  border: 1px solid #5865F2;
}

#entirepost {
  margin-top: 2%;
  margin-left: 2%;
  margin-right: 2%;
  border-right: 1px solid gray;
  border-left: 1px solid gray;
  /* border-radius: 5px; */
  padding: 20px;
}

#commentstextarea {
  resize: none;
  outline: none;
  border: 1px solid gray;
  transition: all 0.5s ease;
}

#commentstextarea:focus {
  border: 1px solid #5865F2;
}

#comments {
  margin-top: 10px;
}

#commentcontent {
  margin-top: 1%;
  padding-left: 10px;
  border-left: 3px solid #ccc;
  width: 50%;
}

#commentstitle {
  margin-left: 1%;
  margin-top: 2%;
}

#title {
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  margin-bottom: 12px;
  outline: none;
  border-radius: 16px;
  background-color: transparent;
  border: 1px solid rgb(192, 192, 192);
  color: black;
  transition: all 0.5s ease;
}

#title:focus {
  border: 1px solid #5865F2;
}

#dropdownmenu i {
  float: right;
}

#dropdownmenu {
  width: 200px;
}

<div id="content" style="margin-top:100px">
  <h1 class="display-4">Discussion Board</h1>
  <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#myModal">
New Post <b style="font-size:large"> </b>
</button>

  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h4 class="modal-title">New Post</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <form method="post">
            <input name="post_title" type="text" id="title" placeholder="Title...">
            <textarea name="post_content" rows="5" placeholder="Write something..." id="postcontent" pattern="[^()/><\][\\\x22,;|] " required=""></textarea>
            <button name="post" id="postbtn" class="btn btn-outline-dark">Post</button>
          </form>
        </div>

        <div class="modal-footer">
        </div>
        <p style="text-align: right;margin-right:15px;">Discussion Board</p>
      </div>
    </div>
  </div>
  <div id="entirepost">
    <div id="posts">
      <a style="float:right; font-size: large;" class="btn btn-outline-danger" href="deletepost.php?id=35"><b>×</b></a>
      <h3>hi</h3>
      <p>
        hg\r\n
      </p>
      <small> 
        <i> 
            Daniel R                
        </i>
        <span class="badge bg-primary">Developer</span> ·
            A few seconds ago                
    </small>
    </div>
    <br>
    <div id="comments">
      <form method="post">
        <input type="hidden" name="id" value="35">
        <textarea name="comment_content" rows="2" cols="64" id="commentstextarea" placeholder="Comment..." required=""></textarea><br>
        <input type="submit" name="comment" value="Comment" class="btn btn-outline-secondary">
      </form>
      <div id="commentcontent">
        adsf<br>
        <small>
            <i>Daniel R</i>
            <span class="badge bg-primary">Developer</span> ·
            A few seconds ago                    
        </small>
        <br>
      </div>
    </div>
    <div id="commentcontent">
      df<br>
      <small>
            <i>Daniel R</i>
            <span class="badge bg-primary">Developer</span> ·
            A few seconds ago                   
            </small>
      <br>
    </div>
  </div>
  <div id="commentcontent">
    afd<br>
    <small>
            <i>Daniel R</i>
            <span class="badge bg-primary">Developer</span> ·
            A few seconds ago                    
        </small>
    <br>
  </div>
</div>

uj5u.com熱心網友回復：

在每條評論內容之后都有一個關閉</div>太多。所以在第一個評論內容之后，父評論 div 被關閉（太快了）。在第二個評論內容之后，父模式 div 被關閉（太快了）。第三次之后...

所以這可能意味著您的 php 腳本</div>為每個評論內容生成了一個過多的內容。

順便說一句，commentcontent 應該是一個類而不是一個 id。

標籤：

上一篇：如何放置正確的ahref

下一篇：在大螢屏上隱藏Javascript按鈕