我所说的邮寄是指一组具有标题、内容和包含评论的 Accordion 的标记。我在服务器端使用 JSP，在数据库端使用 MySQL。我的JSP代码结构如下:
<div class="col-md-8 col-md-offset-2">
<h1 style="color: crimson;">All Posts</h1>
<br/>
<section class = "post">
<%
try{
con = JdbcUtil.getCon();
start = JdbcUtil.getStart();
String sql = "select * from post_master order by post_date desc";
start = con.prepareStatement(sql);
ResultSet rs = start.executeQuery();
while(rs.next())
{
postid = rs.getInt("postid");
title = rs.getString("post_heading");
content = rs.getString("post_content");
content = content.replaceAll("\n","<br />");
title = title.replaceAll("\n","<br />");
date = rs.getTimestamp("post_date");
int regidpost = rs.getInt("regid");
Object o5 = s.load(Register.class, new Integer(regidpost));
Register regpost = (Register)o5;
String post_usertype = regpost.getUsertype();
String post_clgid = "";
if(post_usertype.equals("Student"))
{
post_clgid = StudentJdbc.getClgid(regidpost);
}
//add later subname feature for tags
%>
<article class="title"><h3><%=title%></h3></article>
<%
if(post_usertype.equals("Student"))
{
%>
<span class = "glyphicon glyphicon-time"></span> <%=date%> by <a href="ViewStudent.jsp?regid=<%=regidpost%>&clgid=<%=post_clgid%>" ><%=regpost.getName()%></a>
<%
}
else
{
%>
<span class = "glyphicon glyphicon-time"></span> <%=date%> by <a href="ViewOea.jsp?regid=<%=regidpost%>" ><%=regpost.getName()%></a>
<%
}
%>
<hr/>
<article class = "content">
<%=content%>
</article>
<br>
<div class = "panel-group" id = "accordion">
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a href = "#<%=postid%>" class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion"><span class="glyphicon glyphicon-file"></span> Comments <span class="badge"><%= MiscJdbc.countComments(postid) %></span> </a>
</h4>
</div>
<div id = "<%=postid%>" class = "panel-collapse collapse">
<div class = "panel-body">
<article class="comment">
<a class="comment-img" href="#non">
<img src="<%=reg.getPic()%>" alt="" width="50" height="50">
</a>
<div class="comment-body">
<div class="text">
<!---------------COMMENT FORM---------------------------->
<form action="addComment?postid=<%=postid%>" method="POST">
<div class="form-group">
<textarea id="inputComment" rows="9" cols="150" wrap = "hard" name ="comment" placeholder="Post Content" class="form-control" autofocus></textarea>
</div>
<div class="form-group">
<input type="submit" class=" btn btn-primary">
</div>
</form>
</div>
</div>
</article>
<%
// Object o3 = s.load(PostComment.class, new Integer(postid));
//PostComment commentobj = (PostComment)o3;
try{
Connection con2 = JdbcUtil.getCon();
PreparedStatement start2 = JdbcUtil.getStart();
String sql2 = "select * from post_comment where postid = ?";
start2 = con2.prepareStatement(sql2);
start2.setInt(1, postid);
ResultSet rs2 = start2.executeQuery();
while(rs2.next())
{
comment = rs2.getString("comment_content");
comment = comment.replaceAll("\n", "<br />");
cmntdate = rs2.getTimestamp("comment_date");
out.println("comment");
int regid2 = rs2.getInt("regid");
Object o4 = s.load(Register.class, new Integer(regid2));
Register regcmnt = (Register)o4;
int cmnt_regid = regcmnt.getRegid();
String cmnt_clgid = "";
String cmnt_usertype = regcmnt.getUsertype();
if(cmnt_usertype.equals("Student"))
{
cmnt_clgid = StudentJdbc.getClgid(cmnt_regid);
}
%>
<article class="comment">
<a class="comment-img" href="#non">
<img src="<%=regcmnt.getPic()%>" alt="" width="50" height="50">
</a>
<div class="comment-body">
<div class="text">
<%=comment%>
<!--Comment here is displayed.-->
</div>
<%
if(cmnt_usertype.equals("Student"))
{
%>
<p class="attribution">By <a href="ViewStudent.jsp?regid=<%=cmnt_regid%>&clgid=<%=cmnt_clgid%>"> <%=regcmnt.getName()%></a> at <%=cmntdate%></p>
<%
}
else{
%>
<p class="attribution">By <a href="ViewOea.jsp?regid=<%=cmnt_regid%>"> <%=regcmnt.getName()%></a> at <%=cmntdate%></p>
<%
}
%>
</div>
</article>
<%
}
start2.close();
rs2.close();
con2.close();
}catch(SQLException ex)
{
out.println(ex);
}
%>
</div> <!--panel-body closes-->
</div> <!--resume-ac closes-->
</div> <!--panel panel-default closes-->
</div> <!--accordion closes-->
</section>
<hr>
<%
}
rs.close();
start.close();
con.close();
}catch(SQLException ex){
out.println(ex);
}
%>
</div>
所有的帖子和评论都以使用 ResultSet 的 JSP scriptlet 的形式出现在这里。
CSS 相对简单:
.post{
border-style: groove;
border-color: #795548;
padding: 10px;
}
.title h3
{
color: #cca01e;
}
但是边界只出现在第一个帖子周围而不是其他帖子周围。我做错了什么？
最佳答案
我不确定是什么问题，我无法使用您提供的原始代码重现它(在您添加所有 JSP 内容之前)
两件小事，有重复的结束标签(如评论中所指出的)，您没有指出它们是否是罪魁祸首。我在下面的代码中将它们注释掉了。
看看这是否是您想要的输出。否则，您将需要进一步澄清您想要的是什么(所需的输出)
希望对你有帮助
.post {
border-style: groove;
border-color: #795548;
padding: 10px;
}
.title h3 {
color: #cca01e;
}<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="col-md-8 col-md-offset-2">
<h1 style="color: #664EB0FF;">All Posts</h1>
<br>
<section class="post">
<article class="title">
<h3>Section 1</h3>
</article>
<span class="glyphicon glyphicon-time"></span> May 22, 2017 by Sahil Dhawan
<hr>
<article class="content">
Main content
</article>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#comments-acc" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"><span class="glyphicon glyphicon-file"></span> Comments <span class="badge">Comments Count</span> </a>
</h4>
</div>
<!-- panel heading -->
<!-- comments-acc -->
<div id="comments-acc" class="panel-collapse collapse">
<!-- panel-body -->
<div class="panel-body">
<article class="comment">
<a class="comment-img" href="#non">
<img src="#">
</a>
<div class="comment-body">
<div class="text">
<p>Hello, this is an example comment</p>
</div>
<p class="attribution">by <a href="#non">Joe Bloggs</a> at 14:23pm, 4th Dec 2010</p>
</div>
</article>
<!-- this is extra
</article>
-->
</div>
<!--panel-body closes-->
</div>
<!--resume-ac closes-->
</div>
<!--panel panel-default closes-->
</div>
<!--accordion closes-->
</section>
<!-- ANOTHER SECTION -->
<section class="post">
<article class="title">
<h3>Section 2</h3>
</article>
<span class="glyphicon glyphicon-time"></span> May 22, 2017 by Sahil Dhawan
<hr>
<article class="content">
Main content
</article>
</section>
<!-- ANOTHER SECTION -->
<section class="post">
<article class="title">
<h3>Section 3</h3>
</article>
<span class="glyphicon glyphicon-time"></span> May 22, 2017 by Sahil Dhawan
<hr>
<article class="content">
Main content
</article>
</section>
</div>
<!-- this is extra
</div>
-->关于html - CSS 边框仅显示在我从数据库中获取的其中一篇帖子上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44206952/