下面的 html 代码用于显示一个包含 4 个文本区域、3 个图像和 3 个标签的容器:
HTML
<div class="row">
<div class="col-md-2">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<div class="alert alert-info alert-dismissable">
<textarea class="form-control3" rows="3" placeholder="Clue 1"></textarea>
<textarea class="form-control4" rows="3" placeholder="Answer"></textarea>
<input type="text" class="form-control1" placeholder="10">
<input type="text" class="form-control2" placeholder="Rejected">
<div>
<img src="images/up.png" width="13px" ;height="13px">
<div class="blank"></div>
<span class="badge badge-danger">100</span>
<img src="images/down.png" width="13px" ;height="13px">
<div class="blank"></div>
<span class="badge badge-danger">50</span>
<img src="images/eye.png" width="20px" ;height="20px">
<div class="blank"></div> <span class="badge badge-danger">120</span>
</div>
</div>
</div>
CSS
.form-inline .form-control3 {
display: inline-block;
width: auto;
vertical-align: middle;
}
.has-warning .form-control4:focus {
border-color: #66512c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
}
.has-error .form-control1:focus {
border-color: #843534;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.has-error .form-control2 {
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
我希望多个容器显示在一个 html 页面中。我的问题是,有没有一种方法可以只编写一次 html 和 css 代码并将其用于其他容器,而无需一次又一次地重复代码(如某些迭代或循环方法或任何其他方法)?
此外,我想在 css 中对图像进行样式化和定位,而不是在我的 html 代码本身中使用样式元素高度和宽度。我尝试为图像使用单独的 div 标签并对齐它。但它不起作用。你能帮我解决这两个问题吗?
提前致谢
最佳答案
使用 Jquery 复制 div。如果您是只会 HTML 和 css 的人,对不起,我认为没有任何办法。如果 HTML 来自任何网络服务器 PHP 或 .NEt 服务器端,我们可以制作多个副本。
关于javascript - 如何循环或迭代相同组件的 html 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30092850/