Java HTML引导一组图像重叠，第二组图像的类似代码不重叠
我有非常相似的HTML和Bootstrap来显示两组图像。但是，第一组图像重叠，第二组图像正确显示且不重叠。有人能找出原因吗 我仍在学习，因此非常感谢任何其他评论 我用java生成HTML，并通过AJAX将其传递回HTML页面 HTML页面是：Java HTML引导一组图像重叠，第二组图像的类似代码不重叠,java,html,ajax,twitter-bootstrap,Java,Html,Ajax,Twitter Bootstrap,我有非常相似的HTML和Bootstrap来显示两组图像。但是，第一组图像重叠，第二组图像正确显示且不重叠。有人能找出原因吗 我仍在学习，因此非常感谢任何其他评论 我用java生成HTML，并通过AJAX将其传递回HTML页面 HTML页面是： <form data-toggle="validator" role="form" id="six"> <div class="container-fluid"> <div cla
<form data-toggle="validator" role="form" id="six">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-select">
<!-- Place for Six image and date -->
<div class="input-group" id="img-six">
</div>
</div>
</div>
</div>
</div>
</form>
<form data-toggle="validator" role="form" id="selectAward">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-select">
<!-- Place for Award image -->
<div class="input-group" id="img-container2">
</div>
</div>
</div>
</div>
</div>
</form>
是否有CSS可供使用？您是否可以在控制台中检查所有开始html标记是否也有结束标记。对不起，耽搁了。我已经添加了适用的CSS。我还检查了开幕式和闭幕式的标签。
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//Get the Youth Member ID
ymID = request.getParameter("ssYMID"); // From Local Storage
byte[] valueDecoded= Base64.decodeBase64(ymID);//decoding part
String decoded_id = new String(valueDecoded);
//Get Six details
List<YthMmbrSixDtls> ymSixList = MySQLConnection.getYthMmbrSixDtls(decoded_id, "Cub");
String json = null;
int i = 0;
int col = 1;
if (!ymSixList.isEmpty()) {
for (final YthMmbrSixDtls ymSix : ymSixList) {
String image = ymSix.getSixPicture();
byte[] bytesEncoded = Base64.encodeBase64(ymSix.getYmSixId().getBytes());//encoding part
String encoded_six_ID = new String(bytesEncoded);
if (i == 0){
//Youth encrypted member ID is stored in session storage - ssYMID
//The encrypted Award ID is: encoded_award_ID
//Selecting the picture will display the requirements for the Award
//Updating the date under the Award will be saved to the database for that Award
json = "<h3>Six</h3>";
json = json + "<div class='row'>";
json = json + "<div class='col-lg-1 col-md-2 col-sm-2 col-xs-4'>";
json = json + "<a href='UpdateYMSixPatrol.html'>";
json = json + "<img src=" + image + " height='90' width='90' style='border-style: none' alt='award image' />";
json = json + "</a>";
json = json + "<div class='caption'>";
json = json + "<p>";
json = json + "<input class='form-control mr-sm-2' type='date' name='sixDate' id='sixDate' value='" + ymSix.getYmSixStartDate() + "' onchange='sixDateUpdateFunction(this.value, \"" + encoded_six_ID.replace("\"", """) + "\")' style='width:160px;'/>";
json = json + "</p>";
json = json + "</div>";
json = json + "</div>";
i++; col++;
}else{
if (col > 12){
json = json + "</div>";
json = json + "<div class='row'>";
col = 1;
}
json = json + "<div class='col-lg-1 col-md-2 col-sm-2 col-xs-4'>";
json = json + "<a href='UpdateYMSixPatrol.html'>";
json = json + "<img src=" + image + " height='90' width='90' style='border-style: none' alt='award image' />";
json = json + "</a>";
json = json + "<div class='caption'>";
json = json + "<p>";
json = json + "<input class='form-control mr-sm-2' type='date' name='sixDate' id='sixDate' value='" + ymSix.getYmSixStartDate() + "' onchange='sixDateUpdateFunction(this.value, \"" + encoded_six_ID.replace("\"", """) + "\")' style='width:160px;'/>";
json = json + "</p>";
json = json + "</div>";
json = json + "</div>";
col++;
}
}
if (col > 0){
json = json + "</div>";
}
}else{
json = "<h3>Six</h3>";
json = json + "<div class='row'>";
json = json + "<div class='col-lg-1 col-md-2 col-sm-2 col-xs-4'>";
json = json + "<a href='UpdateYMSixPatrol.html'>";
json = json + "<img src=images/SixAssignment.gif height='90' width='90' style='border-style: none' alt='award image'/>";
json = json + "</a>";
json = json + "</div>";
json = json + "</div>";
}
response.setContentType("image/jpeg");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//Get the Youth Member ID from local storage
encoded_ymID = request.getParameter("ssYMID");
section = request.getParameter("ssGroupSection");
//Decrypt variables
byte[] valueDecoded1 = Base64.decodeBase64(encoded_ymID);//decoding part
String ymID = new String(valueDecoded1);
//Get Youth Member Image
List<YouthMemberAwards> youthMemberAwards = MySQLConnection.ymAwardsList(ymID, section);
String json = null;
String awardType2 = null;
int i = 0;
int col = 1;
for (final YouthMemberAwards youthMemberAward : youthMemberAwards) {
String image = youthMemberAward.getAwAwardPicture();
byte[] bytesEncoded = Base64.encodeBase64(youthMemberAward.getAwId().getBytes());//encoding part
String encoded_award_ID = new String(bytesEncoded);
if (i == 0){
awardType2 = youthMemberAward.getAwAwardType();
//Youth encrypted member ID is stored in session storage - ssYMID
//The encrypted Award ID is: encoded_award_ID
//Selecting the picture will display the requirements for the Award
//Updating the date under the Award will be saved to the database for that Award
json = "<h3>" + awardType2 + "</h3>";
json = json + "<div class='row'>";
json = json + "<div class='col-lg-1 col-md-2 col-sm-2 col-xs-4'>";
json = json + "<a href='CubAwardOverview.html?id=" + encoded_award_ID + "'>";
json = json + "<img src=" + image + " height='90' width='90' style='border-style: none' alt='award image' />";
json = json + "</a>";
json = json + "<div class='caption'>";
json = json + "<p>";
if(section.equals("Joey") && youthMemberAward.getCaAwardedDate() != null){
json = json + "<input class='form-control mr-sm-2' type='date' name='awardDate' id='awardDate' value='" + youthMemberAward.getCaAwardedDate() + "' onchange='awardDateUpdateFunction(this.value, \"" + encoded_award_ID.replace("\"", """) + "\")' style='width:160px;background-color:#C86C43;'/>";
}else{
if(section.equals("Cub") && youthMemberAward.getCaAwardedDate() != null){
json = json + "<input class='form-control mr-sm-2' type='date' name='awardDate' id='awardDate' value='" + youthMemberAward.getCaAwardedDate() + "' onchange='awardDateUpdateFunction(this.value, \"" + encoded_award_ID.replace("\"", """) + "\")' style='width:160px;background-color:#FFCC05;'/>";
}else{
if(section.equals("Scout") && youthMemberAward.getCaAwardedDate() != null){
json = json + "<input class='form-control mr-sm-2' type='date' name='awardDate' id='awardDate' value='" + youthMemberAward.getCaAwardedDate() + "' onchange='awardDateUpdateFunction(this.value, \"" + encoded_award_ID.replace("\"", """) + "\")' style='width:160px;background-color:#0F640C;'/>";
}else{
if(section.equals("Venturer") && youthMemberAward.getCaAwardedDate() != null){
json = json + "<input class='form-control mr-sm-2' type='date' name='awardDate' id='awardDate' value='" + youthMemberAward.getCaAwardedDate() + "' onchange='awardDateUpdateFunction(this.value, \"" + encoded_award_ID.replace("\"", """) + "\")' style='width:160px;background-color:#4F060A;'/>";
}else{
if(section.equals("Rover") && youthMemberAward.getCaAwardedDate() != null){
json = json + "<input class='form-control mr-sm-2' type='date' name='awardDate' id='awardDate' value='" + youthMemberAward.getCaAwardedDate() + "' onchange='awardDateUpdateFunction(this.value, \"" + encoded_award_ID.replace("\"", """) + "\")' style='width:160px;background-color:#9A050D;'/>";
}else{
json = json + "<input class='form-control mr-sm-2' type='date' name='awardDate' id='awardDate' value='" + youthMemberAward.getCaAwardedDate() + "' onchange='awardDateUpdateFunction(this.value, \"" + encoded_award_ID.replace("\"", """) + "\")' style='width:160px;'/>";
}
}
}
}
}
json = json + "</p>";
json = json + "</div>";
json = json + "</div>";
i++; col++;
}else{
if (awardType2.equals(youthMemberAward.getAwAwardType())){
if (col > 12){
json = json + "</div>";
json = json + "<div class='row'>";
col = 1;
}
}else{
awardType2 = youthMemberAward.getAwAwardType();
json = json + "</div>";
json = json + "<div class='row'>";
json = json + "<h3>" + awardType2 + "</h3>";
json = json + "</div>";
json = json + "<div class='row'>";
col = 1;
}
json = json + "<div class='col-lg-1 col-md-2 col-sm-2 col-xs-4'>";
json = json + "<a href='CubAwardOverview.html?id=" + encoded_award_ID + "'>";
json = json + "<img src=" + image + " height='90' width='90' style='border-style: none' alt='award image' />";
json = json + "</a>";
json = json + "<div class='caption'>";
json = json + "<p>";
if(section.equals("Joey") && youthMemberAward.getCaAwardedDate() != null){
json = json + "<input class='form-control mr-sm-2' type='date' name='awardDate' id='awardDate' value='" + youthMemberAward.getCaAwardedDate() + "' onchange='awardDateUpdateFunction(this.value, \"" + encoded_award_ID.replace("\"", """) + "\")' style='width:160px;background-color:#C86C43;'/>";
}else{
if(section.equals("Cub") && youthMemberAward.getCaAwardedDate() != null){
json = json + "<input class='form-control mr-sm-2' type='date' name='awardDate' id='awardDate' value='" + youthMemberAward.getCaAwardedDate() + "' onchange='awardDateUpdateFunction(this.value, \"" + encoded_award_ID.replace("\"", """) + "\")' style='width:160px;background-color:#FFCC05;'/>";
}else{
if(section.equals("Scout") && youthMemberAward.getCaAwardedDate() != null){
json = json + "<input class='form-control mr-sm-2' type='date' name='awardDate' id='awardDate' value='" + youthMemberAward.getCaAwardedDate() + "' onchange='awardDateUpdateFunction(this.value, \"" + encoded_award_ID.replace("\"", """) + "\")' style='width:160px;background-color:#0F640C;'/>";
}else{
if(section.equals("Venturer") && youthMemberAward.getCaAwardedDate() != null){
json = json + "<input class='form-control mr-sm-2' type='date' name='awardDate' id='awardDate' value='" + youthMemberAward.getCaAwardedDate() + "' onchange='awardDateUpdateFunction(this.value, \"" + encoded_award_ID.replace("\"", """) + "\")' style='width:160px;background-color:#4F060A;'/>";
}else{
if(section.equals("Rover") && youthMemberAward.getCaAwardedDate() != null){
json = json + "<input class='form-control mr-sm-2' type='date' name='awardDate' id='awardDate' value='" + youthMemberAward.getCaAwardedDate() + "' onchange='awardDateUpdateFunction(this.value, \"" + encoded_award_ID.replace("\"", """) + "\")' style='width:160px;background-color:#9A050D;'/>";
}else{
json = json + "<input class='form-control mr-sm-2' type='date' name='awardDate' id='awardDate' value='" + youthMemberAward.getCaAwardedDate() + "' onchange='awardDateUpdateFunction(this.value, \"" + encoded_award_ID.replace("\"", """) + "\")' style='width:160px;'/>";
}
}
}
}
}
json = json + "</p>";
json = json + "</div>";
json = json + "</div>";
col++;
}
}
if (col > 0){
json = json + "</div>";
}
response.setContentType("image/jpeg");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
.form-select {
max-width: 100%;
padding: 5px 5px 5px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}