javaweb栅格系统显示问题

小儿码毙 2020-05-21 06:55:36


代码如下


<!-- 宠物部分代码 -->
<div style="margin:0 0 420px 0;display:block">

<!-- 商品橱窗色带 -->
<div style="background-color:#fcaf17;width:100%;height:70px;border-radius:2em;text-align:center;margin:0 0 30px 0">
<font size="8" color="#563624"><b>这里的萌宠,猛男都顶不住</b></font>
</div>

<!-- 宠物展示 -->
<c:forEach items="${productList}" var="pet">
<div class="col-md-3" id="productDiv" style="background-color:#d1c7b7;padding-left: 0px;padding-right: 0px;border-radius:1em;margin:10px 20px">
<a href="${pageContext.request.contextPath }/productDetailServlet?pid=${pet.pid}" style="text-decoration:none">
<img id="productImg" alt="商品图片" src="${pet.petimage }"><br>
品种:<span id="productIntroduce"><b>${pet.petkind }</b></span><br>
昵称:<span id="productPrice">${pet.pname}</span><br>
价格:<span id="productPrice">¥${pet.price}</span><br>
</a>
</div>
</c:forEach>



<!-- 宠物部分div结束 -->
</div>

<!--清除浮动 -->
<div class="clearfix"></div>

<hr>
<br>
<!-- 宠物粮食部分div -->
<div style="margin:0 0 420px 0;display:block">

<!-- 商品橱窗色带 -->
<div style="background-color:#fedcbd;width:100%;height:70px;border-radius:2em;text-align:center;margin:0 0 30px 0">
<font size="8" color="#563624"><b>宠物吃什么?来看这里吧^_^</b></font>
</div>

<!-- 宠物粮展示 -->
<c:forEach items="${productList2}" var="product">
<div class="col-xs-6 col-sm-4 col-md-3" id="productDiv" style="background-color:#d1c7b7;padding-left: 0px;padding-right: 0px;border-radius:1em;margin:10px 20px">
<a href="${pageContext.request.contextPath }/productDetailServlet?pid=${product.pid}" style="text-decoration:none">
<img id="productImg_1" alt="商品图片" src="${product.petimage }"><br>
产品名:<span id="productIntroduce"><b>${product.pname}</b></span><br>
种类:<span id="productPrice">${product.petkind }</span><br>
价格:<span id="productPrice">¥${product.price}</span><br>
</a>
</div>
</c:forEach>

<!-- 宠物粮食部分div结束 -->
</div>




这两个地方代码是一样的,但是显示的样式就是不一样,我还找不到毛病,我把下面部分的数据换成宠物的信息时候就正常,换回宠物粮食信息就出这样的问题了,强迫症把我逼疯了快要,有没有大牛救救我,谢谢呀
...全文
41 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
原文链接:https://blog.csdn.net/qq_38247809/article/details/107084635 jqery validate插件 案例1-表单校验 bootstrap 栅格系统媒体查询: 案例2-创建一个响应式的页面 案例3-布局首页 总结         使用步骤:                 1.导入jquery.js                 2.导入validate.js                 3.在页面加载成功之后        $(function(){})                 4.对表单进行校验                         $(function(){                                 $("选择器").validate();                         })                 5.编写校验的规则                         $(function(){                                 $("选择器").validate({                                         rules:{},                                         messages:{}                                 });                         })                 6.编写具体的规则                         $(function(){                                 $("选择器").validate({                                         rules:{                                                 // name属性值:"校验器"                                                  // name属性值:{校验器:值,校验器:值}                                         },                                         messages:{                                                 //name属性值:"提示信息"                                                 //name属性值:{校验器:"提示信息",校验器:"提示信息"}                                         }                                 });                         }) ———————————————— 版权声明:本文为CSDN博主「oooola」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

39,082

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧